二分之一

1、绝对定位 + margin-top;

容器绝对定位，设置top值为50%，margin-top的值为容器高度一半的负数。

前提：必须知道DIV的高度

<div class=”content”></div>

.content {
    position:absolute;
    top:50%;
    height:200px;
    margin-top:-100px; /* 容器高度的一半 */
}

优点：适用于所有浏览器，不需要嵌套标签

2、将display设为table;

利用table的vertical-align属性实现。

<div id="wrapper">
    <div id="cell">
    <div class="content"></div>
    </div>
</div>

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

优点：content容器的高度不需要预先知道，高度可随意变化

实现容器垂直居中布局的方法还有很多，本文只介绍笔者常用的两个方法。

最后修改时间：2014年9月8日星期一晚上8点57