如何垂直居中Grid容器？使用align-items无效求解决方案

问题分析 #

你当前的代码中，main 是Grid容器，但align-items属性作用于容器内部的子元素，而非main自身在body中的对齐。要实现main在页面垂直居中，需要将其父元素（body）设置为布局容器，通过父元素的属性来控制main的位置。

解决方案（三种可选） #

方案1：Flex布局改造body

将body设置为Flex容器，直接通过Flex属性实现main的水平+垂直居中：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 1440px;
  height: 900px;
  font-family: "Outfit", sans-serif;
  background-color: hsl(212, 45%, 89%);
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 水平居中子元素 */
  align-items: center; /* 垂直居中子元素 */
}

main {
  display: grid;
  grid-template-columns: 250px;
  background-color: white;
  border-radius: 10px;
  width: 300px;
  height: 500px;
  justify-content: center;
  /* 可移除margin:auto，Flex已实现居中 */
}

方案2：Grid布局改造body

用Grid布局更简洁地实现居中，place-items属性可同时控制水平和垂直对齐：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 1440px;
  height: 900px;
  font-family: "Outfit", sans-serif;
  background-color: hsl(212, 45%, 89%);
  display: grid; /* 启用Grid布局 */
  place-items: center; /* 同时水平+垂直居中子元素 */
}

main {
  display: grid;
  grid-template-columns: 250px;
  background-color: white;
  border-radius: 10px;
  width: 300px;
  height: 500px;
  justify-content: center;
}

方案3：绝对定位方式

如果不想修改body的布局，可通过绝对定位+位移实现main居中：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 1440px;
  height: 900px;
  font-family: "Outfit", sans-serif;
  background-color: hsl(212, 45%, 89%);
  position: relative; /* 确保main的绝对定位相对于body */
}

main {
  display: grid;
  grid-template-columns: 250px;
  background-color: white;
  border-radius: 10px;
  width: 300px;
  height: 500px;
  justify-content: center;
  position: absolute;
  top: 50%; /* 顶部对齐body垂直中点 */
  left: 50%; /* 左侧对齐body水平中点 */
  transform: translate(-50%, -50%); /* 自身偏移50%，实现完美居中 */
}

关键说明 #

• 你之前使用的align-items是作用在main内部，控制img、h1、p这些子元素的垂直对齐，和main自身的居中无关。
• 若要让页面适配不同屏幕，建议将body的width和height改为100vw和100vh，占满整个视口。

内容的提问来源于stack exchange，提问作者cdr-in