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

技术开发

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

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

CSS片段：

❀水平居中

1
2
3
4
.box{
    display: flex;
    justify-content:center;
    }

❀垂直居中

1
2
3
4
5
6
.box{
    display: flex;
    width: 500px;
    height: 20rem;
    align-items: center;
    }

❀水平垂直居中

1
2
3
4
5
6
7
.box{
    display: flex;
    width: 500px;
    height: 20rem;
    align-items: center;
    justify-content:center;
    }