div居中方法汇总

参考：
http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/

水平居中

在父元素中利用以下代码即可

text-align：center;
margin：0 auto;

垂直居中

line-height方法

html

<div id="parent" height="200px">
<img src="img.png"/>
</div>

css

#parent {line-height: 200px;}
#parent img {vertical-align: middle;}

这种方法适用于子元素为单行文本或单行图片，但前提是父元素height精确确定的情况下，像是height: 30%这样的都是不行的.

table法

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent { 
    display: table;
}
#child {
    display: table-cell;
    vertical-align: middle;
}
低版本 IE fix bug：
#child {
    display: inline-block;
}

这种方法较通用，可以适用于各种子元素，但不能对并排的子元素进行居中，只能居中第一个子元素。（可以将多个子元素包装在一个div里，将新的div当作子元素来居中）

padding法

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {
    padding: 5% 0;
}
#child {
    padding: 10% 0;
}