845
CSS垂直/水平居中總結
經常會遇到各種元素要求居中的，今天把他們都叫出來統一解決：
1.水平居中
1.1行內元素
text-align:center;
1.2固定寬度塊級元素
margin-left:auto;margin-right:auto;
注意：一定要確保設定了寬度值，而且聲明了DOCTYPE。
1.3不確定寬度塊級元素
<pre name="code" ><div > <ul> <li>不固定寬度</li> <li>不固定寬度</li> <li>不固定寬度</li> </ul> <ul> <span > </span><li>不固定寬度</li> <li>不固定寬度</li> </ul> </div>
由於ul中的li數量未知，所以寬度不確定，現要使ul水平居中。
這裏推薦一種最常用的方法：inline-block。
<pre name="code" >.wrap{background:#ff0;text-align:center;padding:20px;}
li{
list-style:none;
background:#f0f;
display:inline-block;
*display:inline;
*zoom:1;
}
2.豎直居中
2.1父元素高度不確定的行內元素
給父元素設置相同的上下內邊距。
2.2父元素高度確定的單行文本
給父元素設置line-height，值與父元素高度相同，如果使用相對字體，外加overflow:hidden，你懂的。
2.3父元素高度確定的多行文本、圖片以及塊級元素
方法有很多種，但是個人偏好用絕對定位。
<div > <div > 垂直居中 </div> </div>
.wrap{
background:#ff0;
height:200px;
position:relative;
}
.m{
position:absolute;
background:#f0f;
top:50%;
height:80px;
margin-top:-40px;
}
這個方法需要知道父元素和子元素的高度。還有一種簡單方法：
.m{
background:#f0f;
margin:auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height:100px;
width:100px;
}
3.總結
網上查了資料，方法真的很多，但是比較好的就這幾種，選一種最適合的就行了。
最後更新：2017-04-03 05:40:02