水平居中

1.行內元素 父元素使用使用text-align: center; 2.寬度一定 使用margin:0 auto; 3.寬度不一定

• 將子元素改為行內元素display: inline; 在給父元素使用text-align: center;
• 用父級元素浮動和相對定位以及lelf:50%。子元素照樣設定但left:-50%

.container ul{
   float: left;
   position: relative;
   left: 50%;
}
.container li{
   float: left;
   position: relative;l
   eft:-50%;
}
 

垂直居中

表格佈局vertical-align: middle;

#box{
    display: table;
}

#contentl {
    display: table-cell;
    vertical-align: middle;
}

2.絕對定位

<div class="content"> Content goes here</div>  
#content {
        position: absolute;
        top: 50%;
        height: 100px;
        width: 100px;
        background-color: red;
        margin-top: -50px; //設定為 - 高的一半
}
 

水平垂直居中

1.position元素已知寬度 父元素：position: relative; 子元素：position: absolute; 將margin的margin-top設定為-高度的一半 margin-left設定為-寬度的一半

.box {
        height: 500px;
        width: 500px;
        position: relative;
 }
.content{
         width: 100px;
         height: 100px;
         position: absolute;
      	 top: 50%;
     	 left: 50%;
        margin: -50px 0 0 -50px;
      }
 

2.position transform 元素未知寬度 將方法1的margin改為transform: translate(-50%,-50%); 3.flex佈局

  .a {
   width: 600px;
   height: 600px;
   background-color: blue;
   display: flex; //flex佈局
   justify-content: center; //使子元素水平居中
   align-items: center; //使子元素垂直居中
 }
 .b {
   background-color: red;
   width: 200px;
   height: 100px;
 }

3.table-cell佈局 給元素最外層增加一個div

<div class="box">
<div class="content">
  <div class="inner">
  </div>
</div>
</div>
.box {
      width: 300px;
      height: 300px;
      display: table; //表格佈局
    }
.content {
      background-color: rgba(112,223,223, 0.5);
      display: table-cell;
      vertical-align: middle; //使元素垂直局中
      text-align: center; //使元素水平居中
    }
.inner {
      background-color: #000;
      display: inline-block;
      width: 20%;
      height: 20%;
    }