布局-水平垂直居中

结构：

<div class="parent">
        <div class="child">DEMO</div>
    </div>

样式：

1.解决方案一：text-align + inline-block + table-cell + vertical-align(结合前面的水平居中+垂直居中)

.parent {
        background-color: grey;
         300px;
        height: 200px;

        display: table-cell;
        vertical-align: middle;

        text-align: center;
    }
    .child  {
        display: inline-block;
        background-color: skyblue;
    }

2.解决方案二： absolute+transform

.parent {
        background-color: grey;
         300px;
        height: 200px;

        position: relative;
    }
    .child  {
        position: absolute;
        top: 50%;/*相对容器的百分比*/
        left: 50%;
        transform: translate(-50%,-50%);/*相对自身的百分比*/
        background-color: skyblue;
    }

3.解决方案三：flex + justify-content + align-items

.parent {
        background-color: grey;
         300px;
        height: 200px;

        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child  {
        
        background-color: skyblue;
    }