使用弹性布局（display：flex）实现元素的水平居中和垂直居中

为了方便理解我附上具体一点的例子

HTML片段：

<div class="box">
    <p>弹性布局实现元素居中</p>
</div

CSS片段：

❀水平居中

.box{
    display: flex;
    justify-content:center;
    }

❀垂直居中

.box{
    display: flex;
    width: 500px;
    height: 20rem;
    align-items: center;
    }

❀水平垂直居中

.box{
    display: flex;
    width: 500px;
    height: 20rem;
    align-items: center;
    justify-content:center;
    }