各種元素水平垂直居中
在我們進行網站佈局的時候，總是遇到讓已知寬高元素和為止寬高元素水平垂直居中，下面就這問題我總結的幾種方法。
1.讓已知寬度和高度的元素水平垂直居中：
方法一：使用負外邊距和百分比居中
將已知寬高的元素設定為據對定位，將left和top設定為父元素的一半即50%，此時元素的左上角的點位於父元素的中心點，這是將元素向左和向上分別移動元素的寬、高一半，margin-left：寬/2; margin-top:高/2; 最後將元素的中心點與父元素的中心點重合，即元素水平垂直居中。
#inner{
width: 400px;
height: 300px;
background: #0099FF; 
方法二：使用絕對定位水平垂直居中
將元素設定為absolute定位，設定top、right、bottom和left的值都為0px；利用margin的自適應來使得元素水平垂直居中。
#inner{
width: 400px;
height: 300px;
background: #09F;
position: absolute;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
margin: auto;
overflow: auto;
}
<body>
<div 
方法三：用元素絕對定位瀏覽器中水平垂直居中
將元素設定為fiexd定位，設定top、right、bottom和left的值都為0px；利用margin的自適應來使得元素水平垂直居中。
.fixd{
width: 400px;
height: 300px;
position: fixed;
background-color: #0000FF;
z-index: 999;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
overflow: auto;
margin: auto;
}
<body>
<div class="fixd"></div>
</body>
1.讓未知寬度和高度的元素水平垂直居中：
方法一：利用display: table-cell讓元素渲染為表格單元格
利用display的table-cell屬性將未知寬高的元素渲染成為表格單元格的形式，然後設定文字 text-align:center;水平居中； vertical-align:middle; 垂直居中。注意要將元素設定為inline-block型別。
.out{
width: 600px;
height: 600px;
background: #AEC1CC;
display: table-cell;
/*display:table-cell;屬性值可以讓元素渲染為表格單元格 */
text-align:center;
vertical-align:middle;
}
.inner{
background: red;
display: inline-block;
}
方法二：transform:translate()水平垂直居中
一般使用百分比單位的時候都是相對父元素來計算的但是在css裡面有個比較特殊的屬性是相對自身寬高來計算的。那就是transform:translate();所以利用百分比將元素左上角設定為父元素的中心點，再利用translate()將元素向上和向左移動一半。
.out{
width: 300px;
height: 300px;
background: #AEC1CC;
position: absolute;
}
.inner{
background: red;
position: absolute;
left:50%; top:50%;
-webkit-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
<div class="out">
<div class="inner">
兩行文字居中<br/>
第二行
</div>
</div>
方法三：vertical-align:middle水平垂直居中
將新增一個元素讓他的高度自適應為父元素的高度。最後將未知寬高的元素看做一個整體相對於父元素垂直居中。
.inner{
background: red;
display: inline-block;
}
.out{
width: 400px;
height: 400px;
background: #AEC1CC;
text-align:center;
}
.ex{
/*利用一個沒有寬度b標籤來實現水平垂直居中*/
display: inline-block;
*display:inline;
*zoom:1;
height: 100%;
width: 0px;
vertical-align:middle;
}
<div class="out">
<b class="ex"></b>
<div class="inner">
兩行文字居中<br/>
第二行
</div>
</div> 