//子元素和父元素高度不确定情况下
<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;
}