css 如何竖直居中一个元素

  1. 设置竖直居中元素的父元素display为table-cell然后vertical-align: middle 
     1 <div class="container">
 2   <p class="vertical-center">center</p>
 3 </div>
 4 
 5 <style>
 6 .container {
 7   display: table-cell;
 8   vertical-align: middle;
 9   height: 200px; /* 设置高度 和背景方便查看效果*/
10 }
11 </style>

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

  2. 设置需要居中元素position为absolute， 其需要居中的元素position为非static。需要居中的元素top， bottom为0， margin为auto。并且显式设置高度 
     1 <div class="container">
 2     <p class="vertical-center">here is center</p>
 3 </div>
 4 
 5 <style>
 6 .container {
 7   position: relative;
 8   height: 400px;
 9 }
10 .vertical-center {
11   position: absolute;
12   top: 0;
13   bottom: 0;
14   margin: auto;
15   height: 200px;
16 }
17 </style>

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

  3. 总结：第一种简单方便。第二种太麻烦。需要设置太多属性。不过都能达到效果
posted @ 2013-11-28 08:13  我的百科全书  阅读(248)  评论(0)  编辑  收藏  举报