Monthly Archives: September 2015

常用CSS对齐方法

我们最经用的水平对齐就是,

<div id="parent" style="text-align: center;">
<div id="child">
<p>this will be horizontal center</p>
</div>
</div>

或者

<div id="parent">
<div id="child" style="margin: 0 auto;">
<p>this will be horizontal center</p>
</div>
</div>

如果要水平垂直都居中的话,我们常用的是,

<div id="parent" style="display: table-cell; text-align: center; vertical-align: center;">
<div id="child">
<p>this will be horizontal and vertical center</p>
</div>
</div>

在CSS3 中,我们一般用,

<div id="parent" style="position: relative; text-align: center;">
<div id="child" style="position: absolute; top: 50%; transform: translate(0, -50%);">
<p>this will be horizontal and vertical center</p>
</div>
</div>