下文用到的例子html为：

<div class="parent">

    <div class="child">
        lorem
    </div>
</div>

单行固定高度

适用场景：

• 单行文本
• 定高

在父元素或子元素设置 line-height等于父元素高度即可

.parent {
        height: 300px;
        text-align : center;
    }

    .child {
        /*注意实现垂直居中不能用百分比，因为百分比是相对字体大小而言的*/
        line-height : 300px;
    }

单行高度不固定

适用场景：

• 父元素需要设置高度，但高度不固定，如百分比的高度
• 单行文本

以下为固定脚本，即一定要写的

.parent {
        vertical-align : middle;
        text-align : center;
    }

    .parent:after {
        display: inline-block;
        content: '';
        height: 100%;
        width: 0;
        vertical-align : middle;
    }

这里是要根据情况来写的，但是父元素下的单行文本所在元素一定要是内联元素，所以要设置

.child { display: inline; }

这里的思路也很简单，用 after伪类元素撑至父元素高度，但是没文本，宽度也为0，但是它设置了 vertical:middle，那么就会是父元素下的文本与这个伪类元素垂直对齐。

padding设置

适用：

• 父元素没设定高度
• 可多行文本

这个实在很简单，父元素设定相同的padding-top，bottom即可

绝对定位垂直水平居中

适用场景：

• 居中内容需要知道宽高（非定高定宽）
• gt IE 7

.parent {
        position: relative;
        width: 300px;
        height: 300px;
    }

    .child {
        position: absolute;
        /*必须*/
        top: 0;
        /*必须*/
        bottom: 0;
        /*必须*/
        left: 0;
        /*必须*/
        right: 0;
        /*必须*/
        width: 50 %;
        /*定制*/
        height: 30 %;
        /*定制*/
        margin: auto;
        /*必须*/
    }

绝对定位计算垂直水平居中

前提：

• 居中的内容需要知道宽高（非定高定宽）

.parent {
        position: relative;
        width: 300px;
        height: 300px;
    }

    .child {
        position: absolute;
        top: 50 %;
        left: 50 %;
        width: 100px;
        height: 200px;
        /*设置为本身宽度的一半*/
        margin - left : - 50px;
        /*设置为本身高度的一半*/
        margin - top : - 100px;
    }

display table法

适用场景：

• 可多行文本居中
• 居中内容一定要裹个标签用来设置 table-cell

.parent {
        display: table;
        text-align : center;
    }

    .child {
        display: inline - block;
        /** 这行主要为了应对IE7及以下不支持**/
        display: table-cell;
        vertical-align : middle;
    }

flex方法

适用场景：

• 现代浏览器，IE10需要加前缀，IE11支持性不太好
• 可多行内容

.parent {
        display: flex;
        justify-content : center;
        align-items : center;
    }

transform方法

适用场景：

• 现代浏览器，IE9需要加前缀

.parent {
        position: relative;
    }

    .child {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

说明：

• 绝对定位是相对于父元素的百分比计算
• transform是相对于内容自身的宽高计算

float方法

适用：

• 父元素有设定高度
• 居中内容有设定高度
• 居中内容铺满child容器或溢出滚动时，更适用于图片或超多文本

.parent {
        height: 200px;
    }

    .parent:before {
        float: left;
        height: 50%;
        width: 100%;
        margin-bottom : -50px; /**为child的高度一半**/
    }

    .child {
        clear: both;
        height: 100px;
    }