页面布局-垂直居中 2.16

//子元素和父元素高度不确定情况下
<div class="parent">
    <div class="child">DEMO</div>
</div>

1.table-cell + vertical-align

.parent{
        display: table-cell;
        vertical-align: middle;
    }

优点：兼容性比较好，能够兼容IE8及以上，如果是IE6/7，将结构调整为表结构即可。

2.absolute + transform

.parent{
        position: relative;
    }
.child{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

3.flex + align-items

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