用 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 管水平（主轴）。对单个块内多行文本，通常只需前者；若要整体水平+垂直居中，两个都得上。

• 单个
  包含自动换行的长文本：用 display: flex + align-items: center 即可，不用 flex-direction: column
• 多个子元素（如多段
  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  ）需整体垂直居中：加 flex-direction: column，此时 justify-content: center 控制它们在纵轴上的位置，align-items: center 控制每段的水平对齐
• 别在 flex 容器里对子元素再设 vertical-align —— 它对 flex 项完全无效

移动端要注意的兼容与渲染细节

iOS Safari 和部分安卓 WebView 对小字号、窄容器下的 flex 居中仍有轻微偏移，不是 bug，是渲染策略差异。

• 最小字号建议 ≥ 12px，避免 10px 或 11px 下 align-items: center 视觉错位
• 避免用 height: 100vh 做固定高度——Safari 在地址栏收起/展开时会重算，导致内容跳动；改用 min-height: 100vh 更稳
• 如果文本内容极短（比如只有两三个字），又设了 max-width，记得加 text-align: center 到子元素，否则水平居中不生效
• 不要为了“兼容老 Android”回退到 display: table-cell —— 现代项目里它的盒模型副作用比收益大得多

真正卡住人的从来不是写几行 CSS，而是忘了高度得“有凭有据”。哪怕只是加一行 min-height: 80px，也比反复调 transform 或猜 line-height 靠谱得多。