简单的垂直居中

初学的时候去面试实习生岗位，笔试题有一道就是让实现垂直居中，当时竟然毫无思路...

今天看书看到一种简单的实现方法：

<style>

.out{

    position: relative;

    width:10em;

    height:10em;

    border:1px solid;

}

.in{

    position:absolute;

    left:0;

    width:100%;

    background:#ccc;

    top:0;

    height:5em;

    bottom:0;

    margin:auto 0;

}

<div class="out">

    <div class="in">

        element

    </div>

</div>

这里的垂直居中主要是利用了绝对定位时垂直高度的计算法则。

但是IE7及以下的版本都不支持这个特性。

 

 

效果如下

element D