推荐使用flex布局实现两行文字居中：父容器设display: flex、flex-direction: column、align-items: center，两行文字分别用div包裹，确保每行独立居中且适配响应式。
用 text-align: center 和 white-space: pre-line 控制换行居中
字要居中、还要分两行，不是靠加 <br> 或空格硬凑——那样在不同屏幕或字体下容易错位。核心是让文本容器水平居中，再让内容主动断行为两行，且每行都独立居中。
- 必须给容器设
text-align: center，否则div里放两行文字，第二行会默认左对齐 - 用
white-space: pre-line可以识别换行符（比如\n或 HTML 中的<br>），同时折叠多余空格，比pre更干净 - 如果用
<br>，记得写在文本中间，别放在开头或结尾，否则可能多出空行
<div style="text-align: center; white-space: pre-line;">第一行<br>第二行</div>
Flex 布局实现更稳的“居中+两行”
当内容动态生成、或需要响应式适配时，flex 比纯 CSS 文本属性更可控。它不依赖换行符，而是靠子元素分行 + 整体对齐。
- 父容器设
display: flex、flex-direction: column、align-items: center - 把两行文字拆成两个
<div> 或 <code><span></span>，避免用<br>破坏语义 - 注意：如果两行文字高度差异大（比如一行含 emoji 或 superscript），需加
line-height统一基线
<div style="display: flex; flex-direction: column; align-items: center;"> <div>第一行</div> <div>第二行</div> </div>
中文“对齐”常被误认为“对齐字符”，其实是“对齐视觉块”
用户说的“对qi”，大概率是指“对齐”二字在视觉上左右对称，比如“对”和“齐”各自占一行、上下严格居中。但中文没有等宽默认，尤其在不同字体（如 SimSun vs system-ui）下，“对”字比“齐”略宽，直接分行后可能看起来偏右。
- 不要依赖字符数判断是否居中，要用盒模型看
offsetWidth或 DevTools 测量实际渲染宽度 - 若必须字字对齐，考虑用
font-family: 'Courier New', monospace强制等宽，但牺牲阅读体验 - 更实用的做法：把“对”“齐”包进两个等宽
<span></span>，加inline-block和text-align: center
vertical-align 对单行内联元素有效，对块级分行无效
有人试过给 <span></span> 加 vertical-align: middle 想调两行上下位置，结果没用——因为 vertical-align 只作用于行内元素在**当前行框**内的对齐，不是整个容器的垂直居中。
立即学习“前端免费学习笔记（深入）”；
- 想垂直居中两行文字整体？得用
flex的justify-content: center，或position: absolute配合transform: translateY(-50%) - 如果容器高度固定（比如
height: 80px），line-height: 80px只对单行生效；两行就得放弃line-height，改用 flex - 移动端 Safari 对
flex的align-items支持良好，但老 Android Webview 可能需加-webkit-box兜底
text-align + pre-line 更轻。关键不是“怎么写出来”，是“换行后每行是否真居中”——这得打开 DevTools 看 computed styles 里的 text-align 生效范围和 line-height 实际值。
