如何使body的直接子div在主轴与交叉轴居中？align-items不生效原因？

你现在的问题出在两个关键点上：

• flex轴方向搞混了：当body设置flex-direction: column时，flex的主轴是垂直方向（从上到下），交叉轴是水平方向（从左到右）。align-items: center控制的是**交叉轴（水平）**的对齐，而垂直居中需要用justify-content: center来控制主轴方向。
• body没有足够的垂直空间：默认情况下body的高度由内容撑开，垂直方向没有多余空间，哪怕加了justify-content: center也看不到垂直居中的效果。

修正后的CSS代码 #

* {
  margin: 0;
  padding: 0;
}

body {
  font-size: 10px;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  align-items: center; /* 控制水平居中 */
  justify-content: center; /* 控制垂直居中 */
  min-height: 100vh; /* 让body占满整个浏览器视口高度 */
}

说明 #

• min-height: 100vh是核心：让body高度至少等于视口高度，给垂直方向留出足够空间，这样justify-content: center才能生效，实现垂直居中。
• 结合align-items: center，就能让作为body直接子元素的div同时在水平和垂直方向上完全居中。

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