#实现居中对齐

居中对齐效果图

#margin + position

设置position的top、bottom、right、left均为0，让其占满整个父级元素
设置margin: auto auto;让其上下左右自动分配剩余空间。
还有，一定要给居中元素设置width、height。

代码如下：

<!-- 居中对齐方式 -->
<div class="wraper">居中对齐</div>

<style>
    .wraper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 300px;
        margin: auto auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: 0 0 5px #ccc;
    }
</style>