文字垂直居中

1.表格方法：

实现方法：表格内容本来就是垂直居中的，可以通过模拟表格处理。

<div class="box_center">
    <div class="inner"></div>
</div>

.box_center {
    display: table-cell;
     300px;
    height: 300px;
    text-align: center;
    vertical-align: middle;
}
.box_center .inner {
    display: inline-block;
}

2.vertical-align: middle实现方法：利用空元素占位实现

<div class="box_center">
    <div class="placeholder"></div>
    <div class="inner"></div>
</div>

.box_center {
     300px;
    height: 300px;
    text-align: center;
}
.box_center .inner {
    display: inline-block;
}
.box_center .placeholder {
    display: inline-block;
     0;
    height: 100%;
    vertical-align: middle;
}

3.绝对定位

.box_center {
     300px;
    height: 300px;
    background: #ccc;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

4.使用 transform 实现

.box_center {
    position: absolute;
     300px;
    height: 300px;
    background: #ccc;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}