题目点评

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

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

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）让绝对定位的元素水平居中对齐

auto; /*水平居中*/

  • left: 0; /*此处不能省略，且为0*/
  • right: 0; /*此处不能省略，且为0*/
  • }