CSS vertical-align 居中,元素垂直居中的方法

通常经常使用的水平居中：

咱们能够经过 text-align:center; 来设置

垂直居中：vertical-align:middle; //有时发现设置后没有任何样式的改变。由于 vertical-align 只对 依赖性的元素生效，即 display:inline-block;或display:table-cell; 有效。

另外还能够经过 ： line-height 属性来设置行高 ，控制元素的垂直高度。

或者经过定位控制元素的位置：

#parent {position: relative;}

#child {position: absolute;top:50%;left:50%}

也能够经过 #child {padding:20% 0;}来实现元居中。

最后元素的浮动也能够实现元素垂直居中：

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

#parent {height: 250px;}#floater {float: left;height: 50%;width: 100%;margin-bottom: -50px;}#child {clear: both;height: 100px;}