React中使用Flexbox无法垂直居中div的问题排查与解决

你的代码核心问题是误用了Flex布局的对齐属性：

• Flex布局中垂直居中需要用align-items: center，而你写的justify-items: center是Grid布局的专属属性，在Flex环境下不会生效。

修正后的App.css代码如下：

.App{
  display: flex;
  justify-content: center; /* 控制水平方向居中 */
  align-items: center;     /* 控制垂直方向居中 */
  width: 100vw;
  height: 100vh;
  background: rgb(232, 232, 232);
}

补充说明： #

Flex布局的主轴默认是水平方向，justify-content负责主轴上的元素对齐；交叉轴默认是垂直方向，align-items负责交叉轴上的元素对齐。你设置的height: 100vh已经让.App容器占满整个视口高度，不需要额外给body设置height:100%也能实现垂直居中效果。

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