如何垂直居中整个Grid容器？是否影响grid-auto-flow: row dense？

嗨，要把整个Grid容器垂直居中，核心是给它的父元素（也就是body）设置布局，让wrapper在父元素里垂直居中。这里给你两种常用的现代方案：

方案1：用Flexbox实现（推荐） #

给body添加Flex布局样式，让它占满整个视口高度，然后把内部元素垂直居中：

html {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向居中 */
  min-height: 100vh; /* 让body占满视口高度 */
  margin: 0; /* 清除body默认的margin，避免出现不必要的滚动条 */
}
.wrapper {
  display: grid;
  width: 100%;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-columns: 20% 20% 20%;
  grid-template-rows: 25% 25% 25%;
  grid-auto-flow: row dense; /* 你的原有属性保留 */
}

这里min-height: 100vh是关键，确保body的高度足够撑满屏幕，这样justify-content: center才能让wrapper垂直居中。

方案2：用Grid布局实现 #

如果你更习惯用Grid，也可以给body设置Grid布局，直接控制垂直对齐：

body {
  display: grid;
  align-items: center; /* 垂直方向居中 */
  min-height: 100vh;
  margin: 0;
}

这种写法更简洁，同样能达到让wrapper垂直居中的效果。

放心，这个居中操作完全不会影响grid-auto-flow: row dense的功能！

原因很简单：grid-auto-flow: row dense是作用于wrapper这个Grid容器内部的，用来控制容器内子项的排列方式（比如填充前面的空白行）。而我们刚才的操作只是改变了wrapper在父元素（body）中的位置，并没有修改wrapper自身的Grid属性，所以子项的排列规则依然会按照row dense的逻辑正常运行。

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