瀑布流中卡片居中需子项自身收窄并设margin: 0 auto，而非依赖父容器text-align或justify-content；因column-count将内容当文本流处理，img须display: block消除底部空隙，且waterfall-item需max-width配合margin才真居中。
瀑布流布局里“居中对齐”不是指整列居中，而是让每张卡片在各自列内水平居中——这需要控制子项自身，而非靠父容器 text-align: center 或 justify-content（Grid 的 row-flow 下无效）。
为什么 text-align: center 对图片没用？
因为 column-count 把内容当纯文本流处理，text-align 只影响行内内容对齐；而图片默认是 inline 元素，底部会留白，导致视觉上“不居中”。
-
img必须设display: block，否则底部多出约 4px 空隙 - 卡片容器（如
.waterfall-item）要设width+margin: 0 auto才能真正居中 - 别在 Grid 容器上用
justify-items: center——它对grid-auto-flow: row无效，只作用于显式网格项
.waterfall-item 怎么写才真居中？
关键在子项自身宽度可控、不撑满列宽，并用 margin 居中。Grid 方案下尤其要注意：列宽由 minmax(300px, 1fr) 动态计算，不能依赖 width: 100%。
- 给
.waterfall-item设固定最大宽度，例如max-width: 300px - 加
margin: 0 auto，确保左右外边距自动均分 - 避免设
width: 100%——它会让卡片填满整列，失去居中意义 - 若用
aspect-ratio包裹图片，容器本身也要margin: 0 auto
Safari 和 Firefox 下居中失效的常见原因
不是样式写错了，而是浏览器对列布局的解析差异导致 DOM 渲染错位。
- iOS Safari 16.4 之前不支持
grid-auto-flow: column，回退到column-count后，margin: 0 auto在某些缩放比例下会失效 - Firefox 需补
-moz-column-break-inside: avoid，否则卡片被截断后居中逻辑崩溃 - 所有浏览器都要给直接子项加
break-inside: avoid，不然卡片从中间劈开，margin: 0 auto就作用在半截元素上了
真正稳定的居中，靠的是子项自己“收窄 + 自动外边距”，而不是指望父容器居中它；最容易被忽略的是 img { display: block } 这一行——没它，再完美的 margin: 0 auto 也会被底部空隙拖偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
