如何仅使用CSS Grid实现子元素水平垂直居中与响应式布局

原代码失效原因 #

• 对齐层级选错：代码中使用的justify-items、align-items是网格轨道内的子项对齐规则，默认网格轨道会拉伸占满整个容器宽度，加上.box设置了width:100%，子元素直接占满整个轨道宽度，居中规则完全被抵消，视觉上看不到任何居中效果。
• 双层嵌套网格冗余：同时给html和body设置display:grid，形成两层嵌套网格，html上设置的对齐规则只能作用于直接子元素body，但body本身被设置了和html等高的100vh，这层对齐完全无效，还容易因文档默认边距的微小偏差产生多余滚动条。
• 响应式适配缺陷：.box默认使用content-box盒模型，3px的边框会额外撑出6px的实际渲染宽度，在小视口下会触发横向滚动，破坏响应式表现。

修正后的可直接运行代码 #

/* 全局统一盒模型，解决边框撑宽问题 */
* {
  box-sizing: border-box;
}

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

/* 仅保留body为网格容器，去掉冗余嵌套 */
body {
  display: grid;
  /* 使用内容层级的居中规则，让整个网格轨道在容器内居中 */
  place-content: center;
}

.box {
  height: 500px;
  width: 100%;
  max-width: 800px;
  background: red;
  border: 3px solid blue;
}

调整后效果说明 #

• 全程仅使用CSS Grid实现，未引入Flex、绝对定位等其他布局方案
• 垂直方向上，.box会始终保持在视口的垂直中线位置
• 水平方向上，.box会在小视口下自动占满可用宽度，当宽度达到800px的上限后，自动停留在视口水平中线位置，完全符合响应式适配要求
• 不会出现多余的横向/纵向滚动条

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