Web前端面試指導(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?
題目點評
這道題目的提問比較多，連續問了三個問題，正常元素、絕對定位元素、互動元素如何居中，而且居中沒有說清楚是垂直居中還是水平居中，要回答清楚這個問題，必須得有深厚的功底，而且要分類的來回答，條理要清楚。可以先把水平居中各種情況說清楚，然後在把垂直居中說清楚。
（一）元素水平居中的方式
1）行級元素水平居中對齊（父元素設置 text-align:center）
[html] view plain copy 
<div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">
<span>行級元素垂直居中</span>
</div>
2) 塊級元素水平居中對齊（margin: 0 auto）
[html] view plain copy
<div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">
<div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 塊級元素水平居中</div>
</div>
3）浮動元素水平居中
寬度不固定的浮動元素
html代碼
[html] view plain copy
<div class="outerbox">
<div class="innerbox">我是浮動的</div>
</div>
CSS樣式
[css] view plain copy
.outerbox{
float:left;
position:relative;
left:50%;
}
.innerbox{
float:left;
position:relative;
right:50%;
}
寬度固定的互動元素
html代碼
[html] view plain copy
<div class="outerbox">
<div>我是浮動的</div>
</div>
css代碼
[css] view plain copy
.outerbox{
background-color:pink; /*方便看效果 */
width:500px ;
height:300px; /*高度可以不設*/
margin: -150px 0 0 -250px; /*使用marin向左移動250px，保證元素居中*/
position:relative; /*相對定位*/
left:50%;
top:50%;
}
4）讓絕對定位的元素水平居中對齊
這種方式非常獨特，大家一定要記牢這種方式，會用這種方式的薪資待遇必然高出幾千￥
[css] view plain copy
.center{
position: absolute; /*絕對定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此處不能省略，且為0*/
right: 0; /*此處不能省略，且為0*/
}
經驗分享：水平居中的主要屬性有
1. text-alin:center;
2. margin:0 auto
3. position:relative|absolute; left:50%;
（二）元素垂直居中對齊
1）對行級元素垂直居中（heiht與line-height的值一樣）
[css] view plain copy
height:300px;
line-height:300px;
2）對塊級元素垂直居中對齊
2.1 父元素高度固定的情況
1）父元素的height與line-height值相同
2）需要垂直居中的元素
vertical-align:middle;// 垂直居中對齊
display:inline|inline-block 塊級元素轉行級元素
HTML代碼
[html] view plain copy
<div class="center">
<div class="inner"></div>
</div>
CSS代碼
[css] view plain copy
.center{
width: 500px;
height:300px;
line-height: 300px;
border:1px solid;
}
.inner{
background: blue;
width: 300px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
2.2 父元素高度不固定的情況
父元素的padding-top和padding-bottom一樣
--------------------------------------------------------------------------------------------------------------------
如果看不懂，可以看視頻操作，代碼演示 http://www.chuanke.com/3885380-190205.html
本文出自 “智學無憂1” 博客，轉載請與作者聯系！
Web前端面試指導(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?