最稳妥的做法是将标题包裹在父容器中并启用Flex布局，即父容器设display: flex、justify-content: center，且必须设置min-height或height以提供有效空间；若需垂直居中则加align-items: center，同时避免父容器使用float或position: absolute。
直接用 justify-content: center 就够了，但必须控制父容器高度
移动端 H5 页面的标题（比如 ）默认左对齐，想让它水平居中，最稳妥的做法是把标题包进一个父容器，再用 Flex 布局。关键不是标题本身加样式，而是父容器得“撑开”——否则 justify-content: center 没作用空间。
常见错误是只写：.header { display: flex; justify-content: center; }，但没给 .header 设高度或最小高度，结果标题看起来还是靠上、没居中感。
- 移动端推荐设
min-height: 44px（iOS 导航栏标准高度）或height: 48px（安卓常见值） - 如果标题要垂直居中，加上
align-items: center，同时确保子元素（如）没额外margin或line-height干扰 - 避免在父容器上同时用
float或position: absolute，会破坏 Flex 行为
body 或 header 直接设 Flex 的风险点
有人图省事，在 或顶层 display: flex，这在简单页面可行，但在真实 H5 中容易出问题：
- 微信 WebView 或某些安卓低版本内核下，
body的height: 100vh可能被键盘弹出后压缩，导致标题“掉下来” - 如果页面有滚动区域（比如
overflow-y: auto的内容区），父容器 Flex 会影响子元素的自然流布局 -
align-items: center对多行文本（比如换行的）可能造成上下留白不均，不如用line-height配合单行更可控
响应式场景下，text-align: center 有时比 Flex 更轻量
如果只是纯水平居中、不要求垂直对齐，且标题始终是单行，text-align: center 是零成本方案——它不改变文档流，不依赖父容器高度，也不受 viewport 变化影响。
- 适用于
直接放在 - 注意：若
float或position: absolute单独定位 - 和 Flex 不同，
text-align对display: block标题天然生效，无需改display类型
真机调试时最常被忽略的兼容细节
Flex 在 iOS Safari 和主流安卓浏览器支持良好，但以下三点实测容易翻车：
-
justify-content: center在 Android 4.4 WebView 中对inline-flex父容器无效，必须用display: flex - 某些 UC 浏览器旧版本不识别
align-items: center，可用line-height匹配容器高度替代垂直居中 - 标题文字过长时，
white-space: nowrap+overflow: hidden+text-overflow: ellipsis要和 Flex 居中配合使用，否则省略号会偏移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
