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

1 前言

趁热打铁写第二篇

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

2 水平居中

水平居中还是挺容易的

写给出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;}

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

reference:
How to horizontally center a div in another div?

2 垂直居中

IE8+，具体未知

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

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

其他还有一些技巧见
https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers

3 水平垂直居中

水平+垂直居中