为了方便理解我附上具体一点的例子
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;
    }