text-align: center 应设在父容器上以居中行内级子元素；混有块级元素时无效；inline-block 需防白空间干扰；多元素水平居中推荐用 flex；line-height 仅适用于固定高度单行文本。
text-align: center 只作用于父容器，不是子元素本身
想让 <span>、<img> 或纯文本在一行里水平居中，90% 的错误都出在给子元素加样式。它根本不需要设 margin: 0 auto，也不吃 justify-content——因为这些对行内级内容完全无效。
正确做法是：在父容器（比如 <div>）上设置 text-align: center。这个声明会控制所有行内级子内容的**行内对齐方式**，包括文字、<img>（默认 display: inline）、<span>、<a> 等。
- 父容器必须是块级（如
<div>、<p>），且未被设为display: flex或display: grid（否则text-align失效） -
<img>若显式设了display: block，就不再响应text-align，得换方案 - 如果父容器里混有块级子元素（如
<div>），它们不会被居中，只会左对齐——text-align不影响块级元素的盒模型位置
inline-block 元素居中要防白空间干扰
当你把多个 <span> 或 <button> 设为 display: inline-block 并希望它们整体居中时，HTML 源码里的换行和空格会被渲染成一个空格字符，导致视觉偏移。这不是 bug，是规范行为。
- 解决方法一：父容器设
text-align: center，子元素设display: inline-block，同时把父容器字体大小设为0，再在子元素里重置font-size - 解决方法二：删掉 HTML 中子元素之间的所有空白符（不推荐，可读性差）
- 解决方法三：用 Flex 替代——父容器设
display: flex+justify-content: center，彻底绕过白空间问题
Flex 布局让“一行中居中”真正可控
当你要居中的不只是文字，而是按钮组、图标栏、导航项这类需要统一高度/间距/对齐的行内流内容时，text-align 就力不从心了。此时 display: flex 是更干净的选择。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex+justify-content: center，所有直系子元素自动水平居中，不管它是block还是inline - 若需垂直居中（比如图标和文字基线对齐），加
align-items: center；注意这要求父容器有明确高度或能撑开 - 老版 Safari（iOS 8.x 及更早）需加
-webkit-前缀：display: -webkit-flex和-webkit-justify-content: center - 别直接在
<body>上用display: flex——可能意外让全局<p>、<h1>等变成 flex item，破坏原有流式布局
line-height 居中只适用于单行文本，且高度必须固定
用 line-height 实现单行文字垂直居中，原理是让行高和容器高度一致，从而把文字“挤”到中间。但它极其脆弱：
- 只对纯文本或单行
inline内容有效；一旦换行，文字会溢出或截断 - 容器高度必须是固定值（如
height: 40px），不能是min-height或自适应 -
line-height会继承，若子元素设置了不同字号，可能导致错位 - 现代项目中，优先用
display: flex+align-items: center替代，兼容性和可维护性高得多
真正容易被忽略的是：所谓“一行中居中”，本质是两种需求混在一起——你得先分清当前目标是「行内内容对齐」还是「多个块状项在行内排列」。前者用 text-align，后者用 flex，强行套用同一套逻辑，十次有九次会卡在白空间、display 类型或继承链上。
