最直接的文本居中方式是给父容器设置text-align: center，但仅对内部行内内容生效；flex布局下应改用justify-content: center；绝对定位配合transform: translatex(-50%)适用于脱离文档流场景；禁用已废弃的标签。
用 text-align: center 最直接，但只对块级元素生效
行内文本居中，最常用也最稳妥的方式就是给父容器加 text-align: center。注意它不作用于自身，而是控制其内部的**行内内容**（比如文字、span、图片）怎么对齐。
常见错误是直接写在 p 或 div 标签上却没生效——其实是因为该元素本身是块级，但里面的内容可能被设了 float、display: inline-block 且没处理父容器宽度，或者用了 flex 布局覆盖了默认行为。
- 确保父容器有明确宽度（比如
width: 100%或不设限但处于正常文档流） - 避免子元素同时设置了
float或position: absolute，否则脱离文档流后text-align失效 - 如果父容器是
display: flex，text-align不起作用，改用justify-content: center
Flex 布局下用 justify-content 居中文本更可控
当父容器启用 Flex（display: flex），text-align 就不管用了。此时要靠 justify-content: center 水平居中整个子元素，包括文字块。
适用场景：需要同时居中文本+图标、按钮+说明文字、响应式卡片标题等。
立即学习“前端免费学习笔记（深入）”；
- 必须先设
display: flex，否则justify-content无效 -
justify-content对单个文字节点（如纯文本）无效，需包裹一层span或p - 若想让多行文字在容器内整体居中（含垂直），还要加
align-items: center和flex-direction: column
<div style="display: flex; justify-content: center;"> <p>这行文字会水平居中</p> </div>
绝对定位 + transform 居中适合脱离文档流的场景
当文字需要脱离正常布局（比如悬浮提示、弹窗标题、loading 文字），又不想依赖父容器宽度，可以用 position: absolute 配合 transform: translateX(-50%)。
原理是把左边缘移到父容器中心，再向左挪自身宽度一半——浏览器自动计算，不用写具体像素值。
- 父容器必须设
position: relative（或其它非static值），否则absolute会相对于 viewport 定位 - 不能只写
left: 50%，否则文字左端在中心，整体偏右；必须补transform: translateX(-50%) - IE9+ 支持
transform，旧版 IE 需要额外前缀或换方案
<div style="position: relative; height: 200px;"> <p style="position: absolute; left: 50%; transform: translateX(-50%); margin: 0;">悬浮居中文字</p> </div>
不要用 <center></center> 标签，HTML5 已废弃
<center></center> 在 HTML5 中是过时标签，所有浏览器虽仍渲染，但 W3C 明确不推荐，校验器报错，也不利于语义化和维护。
有人图省事在模板里还用它，结果遇到 CSS 优先级冲突、嵌套失效、移动端缩放异常等问题，根源都是它绕过了样式层控制逻辑。
- 现代项目中一旦发现
<center></center>，应立即替换为 CSS 方案 - 某些 CMS 输出的老内容可能含该标签，可用 CSS 重置：
center { display: block; text-align: center; }，但只是兜底，不是正解 - VS Code 或 WebStorm 的 HTML 校验插件通常会标黄警告，留意这类提示
float、position 或 display 的连锁影响。 
