页面布局-居中 2.16

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

1. inline-block + text-align + table-cell + vertical-align

.parent{
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
.child{
        display: inline-block;
    }

2. absolute + transform

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

3.flex

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

总结：
1.首先需要了解CSS属性的值和特性
2.对问题分解、拆分