将子元素定位到父元素的正中间

效果图:
html代码

<div class="one">
        <div class="two">
            <div class="three"></div>
        </div>
    </div>

css代码

 .one{
        background-color: burlywood;
        width: 400px;
        height: 300px;
        position: relative;
        overflow: hidden;
    }
    .two{
        background-color: aqua;
        width: 200px;
        height: 100px;
        position:absolute;
        top:50%;//子元素top:50%;向下移动父元素height的一半
        left:50%;//left:50%;向右移动父元素width的一半
        transform: translate(-50%, -50%);//将元素沿x轴反方向移动本元素的一半width,沿y轴反方向移动本元素的一半height
    }
    .three{
        width: 100px;
        height: 50px;
        background-color: yellow;
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
    }

下面解释一下:在子元素中用百分比设置宽度、高度、top、left、bottom、right这类属性，这个百分比是相对于父元素的，比如上面.two{top：50%；}是距离头部父元素高度50%的距离，而不是two本身的高度一半。但是下面transform：translate（-50%，-50%）；这个是相对于元素本身的宽高来的。

这么定位子元素在父元素中的位置有一个问题————如果要用transform：scale（）；再设置元素 那么最后的transform：translate（-50%，-50%）；会失效，适用于静态的图形，但父元素宽高不定的情况