用 display: flex + align-items: center 实现垂直居中需父容器有明确高度，否则因容器塌陷导致失效；移动端尤其要注意 height:auto、vh 动态计算偏差及小字号渲染偏移等问题。
直接用 display: flex + align-items: center 就行，但必须确保父容器有明确高度约束，否则“居中”只是假象。
为什么 align-items: center 在移动端多行文本里常失效？
不是属性错了，是容器塌了。Flex 的 align-items 依赖父容器在交叉轴（垂直方向）上有可参考的高度——如果父容器 height 是 auto 或没被撑开，它实际高度为 0，文字自然贴顶。
- 常见错误：只加
display: flex和align-items: center，却没设height、min-height或让父级通过其他方式提供高度上下文 - 移动端尤其明显：视口缩放、字体渲染差异、iOS Safari 对
vh的动态计算偏差，都可能让“看似有高度”的容器实际不可靠 - 检查方法：给父容器加个临时
border或background，看它是否真占位
align-items: center 和 justify-content: center 怎么配？
两者分工明确：align-items 管垂直（交叉轴），justify-content 管水平（主轴）。对单个块内多行文本，通常只需前者；若要整体水平+垂直居中，两个都得上。
- 单个
<div> 包含自动换行的长文本：用 <code>display: flex+align-items: center即可，不用flex-direction: column - 多个子元素（如多段
<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）需整体垂直居中：加flex-direction: column，此时justify-content: center控制它们在纵轴上的位置，align-items: center控制每段的水平对齐 - 别在 flex 容器里对子元素再设
vertical-align—— 它对 flex 项完全无效 - 最小字号建议 ≥
12px，避免10px或11px下align-items: center视觉错位 - 避免用
height: 100vh做固定高度——Safari 在地址栏收起/展开时会重算，导致内容跳动；改用min-height: 100vh更稳 - 如果文本内容极短（比如只有两三个字），又设了
max-width，记得加text-align: center到子元素，否则水平居中不生效 - 不要为了“兼容老 Android”回退到
display: table-cell—— 现代项目里它的盒模型副作用比收益大得多
移动端要注意的兼容与渲染细节
iOS Safari 和部分安卓 WebView 对小字号、窄容器下的 flex 居中仍有轻微偏移，不是 bug，是渲染策略差异。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是写几行 CSS，而是忘了高度得“有凭有据”。哪怕只是加一行 min-height: 80px，也比反复调 transform 或猜 line-height 靠谱得多。
