前端面试纪实（二）：div居中，垂直或者水平居中

最新推荐文章于 2024-07-25 18:43:45 发布

阿超就是我

最新推荐文章于 2024-07-25 18:43:45 发布

阅读量417

点赞数

分类专栏：面试和笔试 css&css3 文章标签：面试 css

13 篇文章 1 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

趁热打铁写第二篇

我最近在想：对于前端面试官提出的问题一知半解，大约是因为我对这些东西用得少，导致我不大熟悉。

水平居中还是挺容易的

写给出HTML代码

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>


#inner {
  width: 50%;
  margin: 0 auto;
}

width不一定设置50%，小于outer的宽度即可。我经常用这个。

IE8+的话，可以这么写：

#inner {
  display: table;
  margin: 0 auto;
}

虽然这个有兼容性要求，但是好处是不需要指定宽度

IE8+，具体未知

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

#inner {
    vertical-align: middle;
    display: table-cell;
}
#outer {
    height: 400px; //只是为了显示
    display: table;
}

关注

专栏目录