元素居中的特殊情况

我们知道要居中一个不清楚其宽高的元素时，可以使用以下两种方法：

1. 在父元素上使用flex布局

<div class="out">
    <div class="in"></div>
</div>
<style type="text/css">
    .out{
        display:flex;
        justify-content: center;
        align-items: center;
    }
</style>

2.在子元素上使用top，left和translate

<div class="out">
    <div class="in"></div>
</div>
<style type="text/css">
    .out{
        position:relative;
    }
    .in{
        position:absolute;
        left:50%;
        top:50%;
        transform: translate3d(-50%,-50%,0);
    }
</style>

但是有时在父元素上已经使用absolute定位，而子元素不能使用translate。此时可以在父元素和子元素之间添加一个中间元素，使其长宽为父元素的100%，然后在该元素上使用flex布局就可以了。