Web前端面試指導(十四)：如何居中一個元素（正常、絕對定位、浮動元素）?

題目點評

這道題目的提問比較多，連續問了三個問題，正常元素、絕對定位元素、互動元素如何居中，並且居中沒有說清楚是垂直居中仍是水平居中，要回答清楚這個問題，必須得有深厚的功底，並且要分類的來回答，條理要清楚。能夠先把水平居中各類狀況說清楚，而後在把垂直居中說清楚。

（一）元素水平居中的方式

1）行級元素水平居中對齊（父元素設置 text-align:center）      

[html]  view plain  copy

 

1. <div style="width: 200px; height: 100px;border: 1px solid;text-align:center;">    
2.     <span>行級元素垂直居中</span>     
3. </div>   

          

2)   塊級元素水平居中對齊（margin: 0 auto）

[html]  view plain  copy

 

1.  <div style="width: 200px; height: 100px;border: 1px solid;text-align: center;">  
2.      <div style="border: 1px solid red;margin: 0 auto;height: 50px;width: 80px;"> 塊級元素水平居中</div>  
3. </div>  

3）浮動元素水平居中

• 寬度不固定的浮動元素

html代碼

[html]  view plain  copy

 

1. <div class="outerbox">  
2.  <div class="innerbox">我是浮動的</div>  
3. </div>  

CSS樣式

 

[css]  view plain  copy

 

1. .outerbox{  
2. float:left;   
3. position:relative;   
4. left:50%;   
5. }   
6. .innerbox{    
7. float:left;   
8. position:relative;   
9. right:50%;   
10. }  

• 寬度固定的互動元素

html代碼

[html]  view plain  copy

 

1. <div class="outerbox">  
2.    <div>我是浮動的</div>  
3. </div>  

css代碼

[css]  view plain  copy

 

1. .outerbox{  
2.     background-color:pink; /*方便看效果 */    
3.     width:500px ;   
4.     height:300px; /*高度能夠不設*/  
5.     margin: -150px 0 0 -250px; /*使用marin向左移動250px，保證元素居中*/  
6.     position:relative;   /*相對定位*/  
7.     left:50%;  
8.     top:50%;  
9. }  

    4）讓絕對定位的元素水平居中對齊

  這種方式很是獨特，你們必定要記牢這種方式，會用這種方式的薪資待遇必然高出幾千¥

[css]  view plain  copy

 

1. .center{  
2.          position: absolute; /*絕對定位*/  
3.          width: 500px;  
4.          height:300px;  
5.          background: red;  
6.          margin: 0 auto; /*水平居中*/  
7.          left: 0; /*此處不能省略，且爲0*/  
8.          right: 0; /*此處不能省略，且爲0*/  
9. }  

經驗分享：水平居中的主要屬性有

 

1. text-alin:center;

2. margin:0 auto

3. position:relative|absolute; left:50%;

（二）元素垂直居中對齊

1）對行級元素垂直居中（heiht與line-height的值同樣）

[css]  view plain  copy

 

1. height:300px;  
2. line-height:300px;  

2）對 塊級元素垂直居中對齊

2.1 父元素高度固定的狀況

1）父元素的height與line-height值相同

2）須要垂直居中的元素

 vertical-align:middle;// 垂直居中對齊

 display:inline|inline-block 塊級元素轉行級元素

HTML代碼

 

[html]  view plain  copy

 

1. <div class="center">  
2.     <div class="inner"></div>  
3. </div>  

 

CSS代碼

 

[css]  view plain  copy

 

1. .center{  
2.     width: 500px;  
3.     height:300px;  
4.     line-height: 300px;  
5.     border:1px solid;  
6. }  
7.  .inner{  
8.      background: blue;  
9.      width: 300px;  
10.      height: 100px;  
11.      display: inline-block;  
12.      vertical-align: middle;  
13.  }  

 

2.2 父元素高度不固定的狀況

 父元素的padding-top和padding-bottom同樣 

--------------------------------------------------------------------------------------------------------------------

若是看不懂，能夠看視頻操做，代碼演示 http://www.chuanke.com/3885380-190205.html