CSS控制子元素水平垂直居中（二）

实现元素的水平垂直居中

效果：

方法1：flex布局

   .out{
        background-color: red;
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .inner{
        background-color: yellow;
        width: 50px;
        height: 50px;
    }

方法2：相对定位+margin

首先用margin实现水平居中，再开启子元素的相对定位，用top和平移实现垂直居中。

   .out{
        background-color: red;
        width: 200px;
        height: 200px;
    }
    .inner{
        background-color: yellow;
        width: 50px;
        height: 50px;
        margin: 0 auto;
        position: relative;
        top:50%;
        transform: translateY(-50%);
    }

方法3：绝对定位

.out{
        background-color: red;
        width: 200px;
        height: 200px;
        position: relative;
    }
    .inner{
        background-color: yellow;
        width: 50px;
        height: 50px;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }