瀑布流卡片底部文字居中需按布局类型选择方案：column-count用text-align+padding；grid masonry用flex或grid子容器配合margin-top: auto或place-items；JS绝对定位则用position: absolute+flex居中，并注意iOS兼容性和懒加载更新。
瀑布流卡片里文字居中要先看卡片布局类型
底部文字居中不是独立问题，它高度依赖卡片整体的布局方式。用 column-count 的卡片是文档流切分，用 grid-template-rows: masonry 的是原生列分配，用绝对定位 + JS 计算的则是完全手动控制——每种下，文字居中的手段和坑都不一样。
column-count 瀑布流中底部文字居中用 text-align + padding
这是最常见也最容易出错的场景：卡片本身没固定高度，column-count 把它们当文本流切分，所以不能靠 flex 或 position: absolute 居中，否则会破坏列流逻辑。
-
text-align: center只能水平居中，垂直方向得靠padding-bottom或line-height（但后者只对单行有效） - 如果底部文字是单独的
<p class="caption">，给它加margin-top: auto无效——因为父卡片不是 flex 容器，auto不起作用 - 推荐写法：
.caption { text-align: center; padding: 8px 12px; }，再统一控制卡片内边距，让视觉位置稳定 - 别给卡片设
height或min-height，否则可能撑乱列高，导致某列突然变短、文字被截
grid + masonry 布局里用 place-items 或 flex 包一层
Chrome/Edge 116+ 支持 grid-template-rows: masonry，这时卡片仍是块级元素，可以自由套 flex 或 grid 子容器。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 直接在卡片上加
display: flex; flex-direction: column;，底部文字用margin-top: auto推到底部并居中 - 或者卡片设
display: grid; place-items: center;，但注意这会让整张卡片内容居中，不是仅底部文字 - 更稳妥的是把底部文字包进一个
<footer>或<div class="card-footer">，再对这个子容器设display: flex; justify-content: center; - 别漏掉
@supports (grid-template-rows: masonry)守卫，降级到传统 grid 时，margin-top: auto在grid-auto-flow: dense下可能不生效，得 fallback 到text-align+padding
JS 动态定位卡片时底部文字必须脱离文档流
像 Masonry.js、Isotope 这类库靠计算 offsetTop 插入卡片，此时卡片是 position: absolute，内部文字居中就回归经典方案。
立即学习“前端免费学习笔记（深入）”；
- 底部文字容器必须设
position: absolute; bottom: 0; left: 0; right: 0;，再配text-align: center - 如果文字有多行，
line-height失效，得用display: flex; align-items: center; justify-content: center;包一层 - 注意 iOS Safari 中，
position: absolute子元素在 overflow 容器里点击失灵——加-webkit-overflow-scrolling: touch和min-height: 1px到卡片根元素 - 图片懒加载完成前，卡片高度为 0，文字可能贴顶或消失，务必监听
img.onload后调用 layout 更新
真正麻烦的不是怎么居中，而是不同瀑布流实现机制下，居中逻辑根本不在同一层 DOM 关系里——你得先确认自己用的是哪条技术路径，再选对应解法，混用就会出现文字飘走、点击失效、SSR 首屏错位这些静默问题。
