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