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;}