css水平居中 垂直居中 水平垂直居中

blog.csdn.net/freshlover/…

水平居中

• 行內元素：text-align:center;
• flex佈局：display:flex; justify-content:center;
• 經常使用(前提：已設置width值)：margin-left:auto; margin-right:auto; margin:0 auto;
• 不定寬塊狀元素水平居中:改變塊狀元素的 dispaly 屬性爲 inline， 而後給父級設置 text-aline：center 來實現水平居中， 這種方法的缺點是不能再給元素設置寬高了

<div style="text-align: center;">
      <div style="display: inline;">不定寬塊狀元素水平居中</div>        
</div>
複製代碼

垂直居中

* 行高：height：100px;line-height:100px; * table-cell:

html

<div class="box box1">
       <span>垂直居中</span>
</div>
複製代碼

css

.box1{
   display: table-cell;
   vertical-align: middle;
   text-align: center;        
}
複製代碼

• flex佈局：display: flex; justify-content:center; align-items:center;

水平垂直居中

• 方案1：position 元素已知寬度 父元素設置爲：position: relative; 子元素設置爲：position: absolute;距上50%，據左50%，而後減去元素自身寬度的距離就能夠實現

html

<div class="box">
   <div class="content">
   </div>
</div>
複製代碼

css

.box {
   background-color: #FF8C00;
   width: 300px;
   height: 300px;
   position: relative;
}
.content {
   background-color: #F00;
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -50px 0 0 -50px;
}
複製代碼

• 若是元素未知寬度，只需將上面例子中的margin: -50px 0 0 -50px;替換爲：transform: translate(-50%,-50%);
• flex佈局：display: flex; justify-content:center; align-items:center;
• 不知道本身高度和父容器高度的狀況下, 利用絕對定位只須要如下三行：

css

parentElement{
       position:relative;
   }

childElement{
       position: absolute;
       top: 50%;
       transform: translateY(-50%);

}

複製代碼

• 若父容器下只有一個元素，且父元素設置了高度，則只須要使用相對定位便可

css

parentElement{
       height:xxx;
   }

   .childElement {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
   }

複製代碼