flex布局控制子元素水平垂直居中

<div class="box">
    <i class="iconfont test"></i>
    <font>点击菜单</font>
</div>

我们通过CSS控制

.box {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    width: 1000px;
    height: 600px;
    border: 1px solid red;
}
.inner {
    width: 300px;
    height: 200px;
    background-color: red;
}