题目点评

这道题目的提问比较多，连续问了三个问题，正常元素、绝对定位元素、互动元素如何居中，而且居中没有说清楚是垂直居中还是水平居中，要回答清楚这个问题，必须得有深厚的功底，而且要分类的来回答，条理要清楚。可以先把水平居中各种情况说清楚，然后在把垂直居中说清楚。

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

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

本文出自 “智学无忧1” 博客，转载请与作者联系！

Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?