如何通过Flex或Grid实现main元素在body中垂直水平居中？

你遇到的核心问题是body默认没有占满整个视口高度，直接给body加grid/flex居中属性时，垂直方向没有足够空间生效。以下是两种可靠的解决方案：

Grid 方案 #

先给html和body设置最小高度占满视口，再通过grid布局实现居中：

html, body {
  margin: 0; /* 清除默认边距，避免多余留白 */
  min-height: 100vh; /* 让容器至少占满整个视口高度 */
}

body {
  display: grid;
  place-content: center;
}

Flex 方案 #

同样确保容器高度，再用flex布局的双轴居中属性：

html, body {
  margin: 0;
  min-height: 100vh;
}

body {
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
}

关键说明 #

• 必须设置min-height: 100vh（或height: 100%，但vh更适配视口），否则body高度仅由内部内容撑开，垂直居中无法生效。
• 清除body的默认margin，避免出现滚动条或不必要的空隙。

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