css实现元素的垂直居中

在之前做的几套笔试题中，经常会看到如何让元素实现垂直居中的问题，今天我们来看一下，如何实现一个元素的垂直居中。

一、单行文本在固定高度的父元素中的垂直居中

这个比较简单，只需要给父元素加上line-height样式即可，值与父元素的height值相等即可。但是局限性也比较大，只能是但行文本。如图：

二、块级元素在父元素中的垂直居中

这种情况下稍微麻烦一点，不过办法还是有的

<div class="d1">
    <div class="dd">
        div
    </div>
</div>

首先看上面的元素结构，最外层div为父元素，如图：

这种情况下，我们可以给父元素的display设置为table，给内部的div的display设置为table-cell，之后利用vertical-align:middle;来实现垂直居中，样式如下：

.d1{
    width:500px;
    height:500px;
    border:1px solid #ddd;
    display:table;
}
.dd{
    border:1px solid #000;
    height:30px;
    display:table-cell;
    vertical-align: middle;
}

加上上面的样式后，就可以实现内部元素垂直居中了，效果如图：

不过此时内部div虽然垂直居中，但是高度与父元素一致了，这可能不是我们想要的效果，再进行修改。在class为dd的div内部再加一个div，并设置它的宽高为30px，边框为红色，如果想要他水平也居中，我们也可以再加上margin:auto;样式，效果如下：

这样，我们就实现了元素的垂直居中

三、已知父元素的高度和元素本身的高度

这种情况下就比较简单了，我们只需要元素加上一个margin-top即可，值为父元素高度的一半减去元素本身高度的一半。如果不方便设置margin的话，我们还可以用相对定位来实现垂直居中，相对定位的top值跟前面讲的margin-top的值一样即可。