解决div中元素垂直居中的五种方法

假设div的高度为200px，字体大小为20px

方法一：利用padding内边距

<div class="type1">
    我要垂直居中
</div>

.type1{
        border: 1px solid blue;
        font-size: 20px;
        padding: 90px 0;
        line-height: 1;
    }

注意此时不用设置div的高度height：200px，因为内边距加字体的像素大小就会等于200px，如果加上，那么div的高度就会超过200px。

同时还要注意的一点是，用firebug审查元素，发现此时元素的像素大小并不是20px，而是大于20px，因此在这儿要设置行间距line-height：1来保证整个div的大小为200px。

方法二：利用line-height行间距

.type2{
        height: 200px;
        border: 1px solid blue;
        font-size: 20px;
        line-height: 200px;
    }

设置行间距为200px

方法三：利用display的table-cell，使其变成具有表格的属性，则在此时可以利用vertical-align:middle。

<pre style="background-color: rgb(255, 255, 255); font-family: Menlo; font-size: 9pt;"><pre name="code" class="html">.type3{
    height: 200px;
    border: 1px solid blue;
    font-size: 20px;
    line-height: 1;
    display: table-cell;
    vertical-align: middle;
}

方法四：利用relative和absolute相对和绝对定位，通过计算距离父元素上边距和左边距的距离来对子元素进行定位

此时要给元素加上行标签

<div class="type4">
    <span>我要垂直居中</span>
</div>

.type4{
        height: 200px;
        border: 1px solid blue;
        font-size: 20px;
        position: relative;
    }
    .type4 span{
        position: absolute;
        top: 45%;
        bottom: 45%;
        line-height: 1;
    }

方法五：利用flex弹性布局，webkit内核的浏览器，要加上-webkit，设置为flex布局后，子元素的float、clear和vertical-align属性将失效。而align-items属性定义项目在交叉轴上如何对齐，flex-start是顶端对齐，flex-end是底端对齐，center则为垂直居中，stretch为全部充满，baseline为在一个基准线上

.type5{
        height: 200px;
        border: 1px solid blue;
        /*font-size: 20px;*/
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }

以上五种方法，真实有效可行，最后一种方法是可以在未知字体大小的情况下来达到元素垂直居中的。

在这里贴上两篇关于flex布局的博客，涨姿势了。

语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html