css 如何竖直居中一个元素

设置竖直居中元素的父元素display为table-cell然后vertical-align: middle

<div class="container">
<p class="vertical-center">center</p>
</div>

<style>
.container {
display: table-cell;
vertical-align: middle;
height: 200px; /* 设置高度 和背景方便查看效果*/
}
</style>

http://jsfiddle.net/4PJUr/ 这里是demo， http://www.w3.org/Style/Examples/007/center.en.html#vertical 这里是出处

设置需要居中元素position为absolute， 其需要居中的元素position为非static。需要居中的元素top， bottom为0， margin为auto。并且显式设置高度

<div class="container">
<p class="vertical-center">here is center</p>
</div>

<style>
.container {
position: relative;
height: 400px;
}
.vertical-center {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 200px;
}
</style>

http://jsfiddle.net/wQNB2/ 这里是demo。 http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ 这里是出处。

总结：第一种简单方便。第二种太麻烦。需要设置太多属性。不过都能达到效果