css+div水平垂直居中布局总结（3种方案）

子元素于父元素水平垂直居中且其（ 子元素与父元素） 高度均可变 

方案一：inline-block + text-align + table-cell + vertical-align  优点：兼容性好

<div class="parent">
<div class="child">文字</div>
</div>
<style>
.parent{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child{
display: inline-block;
}
</style>

方案二：absolute + transform 注：transform 为 CSS3 属性，有兼容性问题

<div class="parent">
<div class="child">文字</div>
</div>
<style>
.parent{
position:relative;

}
.child{
position:absolute;
top: 50%;
left: 50%;
transition: translate(-50%,-50%);
}
</style>

方案三：flex + justify-content + align-items  注：有兼容性问题

<div class="parent">
<div class="child">文字</div>
</div>
<style>
.parent{
display: flex;
align-items: center;
justify-content: center;
}
</style>