align-content: center在Chrome中失效，Flexbox垂直对齐div问题

嘿，我碰到过类似的坑！Chrome对Flexbox规范的执行比Firefox和IE更严格，这就是为啥你的垂直对齐在Chrome里失效的原因，我来给你拆解一下问题和解决方案：

核心原因分析 #

align-content: center 这个属性只在Flex容器存在多行Flex项的时候才会生效（也就是开启了 flex-wrap: wrap 且项的总宽度超过容器宽度，自动换行）。如果你的Flex容器是单行排列（默认 flex-wrap: nowrap），Chrome会直接忽略这个属性，而Firefox/IE可能做了兼容处理，所以看起来能生效。另外，如果Flex容器没有设置明确的高度，不管用哪个对齐属性，都没法实现垂直居中——因为容器本身的高度就是内容的高度，没有多余空间来调整项的位置。

针对性解决方案 #

根据你的布局需求，分两种情况处理：

情况1：你的产品项需要多行排列 #

如果是要让产品项换行，同时在容器中垂直居中，修改你的CSS如下：

.products-wrapper {
  display: flex;
  flex-wrap: wrap; /* 必须开启换行，否则align-content无效 */
  align-content: center; /* 多行时的交叉轴垂直对齐 */
  height: 500px; /* 给容器设置一个明确的高度，比如固定像素或视口高度 */
  /* 可选：如果需要水平居中，添加下面这行 */
  justify-content: center;
}

情况2：你的产品项是单行排列 #

如果产品项不需要换行，只是想让单行的项垂直居中，把 align-content: center 换成 align-items: center 即可：

.products-wrapper {
  display: flex;
  align-items: center; /* 单行时控制交叉轴垂直对齐的属性 */
  height: 500px; /* 同样需要容器有明确高度 */
  /* 可选：水平居中加justify-content:center */
}

额外检查点 #

• 确认没有其他CSS属性（比如 position: absolute、float）干扰Flex布局的生效
• 检查父元素的高度是否正确传递，如果容器的父元素没有高度，你可能需要给父元素也设置高度（比如 html, body { height: 100%; }）

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