React.js开发中div无法正常居中到屏幕中心的问题求助

React中CSS的布局规则和原生HTML完全一致，你遇到的问题属于普通CSS布局逻辑问题，和React框架本身无关。
flex布局的align-items: center属性仅在父容器拥有明确的交叉轴（默认对应垂直方向）高度时生效，你的代码存在两处高度缺失问题：

• body默认自带浏览器内置边距，且.mainScreen未设置占满视口的高度，仅能根据子元素高度自适应，无多余垂直空间实现页面级居中
• .box未设置高度，默认高度和蓝色子元素保持一致，无法在红色父容器内完成垂直居中

修改screen.css #

body {
    margin: 0; /* 清除浏览器默认边距 */
    background-color: rgb(150, 164, 177);
}

.mainScreen {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* 占满整个视口高度 */
}

.mainScreen > div {
    width: 500px;
    height: 500px;
    background-color: red;
}

修改box.css #

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* 占满红色父容器的高度 */
}

.box > div {
    background-color: royalblue;
    height: 300px;
    width: 300px;
    border-radius: 10px;
}

修复完成后即可实现红色div居中在屏幕中心，蓝色div居中在红色div内部的效果。

内容的提问来源于stack exchange，提问作者coolhack7