HTML5文字居中无唯一解，需据场景选法：单行固定高用text-align+line-height；现代项目首选Flexbox（display:flex+justify-content+align-items）；Grid适合已用Grid布局者（place-items:center）；避免absolute+transform因可访问性与响应问题。
HTML5 里让文字水平垂直居中，没有“唯一正确解”，只有“当前场景下最稳妥的解”。选错方法轻则失效，重则破坏布局流、触发重排或在旧浏览器里直接不显示。
用 text-align + line-height 居中单行文字
这是最轻量、兼容性最好的方案，但只适用于容器高度固定、内容为纯单行文本的场景。
-
text-align: center控制水平居中 -
line-height设为和容器height相同值，可迫使单行文字视觉上垂直居中 - 如果文字换行或容器高度由内容撑开，
line-height会失效甚至拉高行距 - 不推荐用于响应式容器或含图标/内联元素的混合内容
div {
width: 200px;
height: 60px;
background: #f0f0f0;
text-align: center;
line-height: 60px; /* 必须等于 height */
}用 Flexbox 实现真正可靠的居中（推荐）
现代项目首选。只要父容器设为 display: flex，一行代码就能同时搞定水平和垂直居中，且天然支持多行、弹性内容、响应式。
- 必须给父容器设置
display: flex -
justify-content: center控制主轴（默认是水平）居中 -
align-items: center控制交叉轴（默认是垂直）居中 - 如果子元素是块级或含多行文本，需额外注意
flex-direction和flex-wrap的影响 - IE10+ 支持，但 IE10/11 对某些属性（如
align-items: center在min-height容器中）有 bug
div {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px solid #ccc;
}用 CSS Grid 实现语义化居中
适合已使用 Grid 布局的容器，或需要更精细控制定位关系的场景。语法简洁，但兼容性略低于 Flexbox（IE 完全不支持）。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid - 用
place-items: center一键启用水平+垂直居中（等价于justify-items: center; align-items: center） - 如果子元素是唯一子项，也可用
place-content: center（作用于整个内容区域） - 注意：Grid 居中对
float、vertical-align等传统对齐方式无效，不要混用
div {
display: grid;
place-items: center;
height: 180px;
background: #eef;
}避免用 position: absolute + transform 的陷阱
虽然常见，但它是“模拟居中”，不是真正的内容居中。容易在动态内容、缩放、无障碍访问中出问题。
- 必须给父容器加
position: relative，否则top/left会相对于视口定位 -
transform: translate(-50%, -50%)依赖精确的偏移计算，若子元素宽高动态变化（比如字体缩放、国际化文本变长），可能偏移不准 - 屏幕阅读器可能忽略
position: absolute元素的语义顺序，影响可访问性 - 在
zoom或强制字体缩放时，transform的像素偏移会失真
div {
position: relative;
height: 150px;
}
div span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}真正难的不是写出某一种居中代码，而是判断当前容器是否允许高度固定、子内容是否会换行、是否要支持 IE、是否要适配读屏软件——这些条件一变，最优解就不同。别背方案，先看约束。
