text-align: center 必须作用于父块级容器才能使行内元素（如span、img、文字）水平居中，它控制行内内容在行盒内的对齐，而非子元素自身定位；img默认inline可响应，设为block或脱离文本流（如float、absolute）则失效；单行垂直居中可用line-height，复杂居中推荐flex。
text-align: center 必须作用于父容器
行内元素（如 <span></span>、<img>、文字）本身不响应 margin: 0 auto，也不能靠自身样式居中。真正起作用的是父块级容器的 text-align: center —— 它控制的是“行内内容在行盒内的对齐方式”，不是子元素自己的定位。
常见错误现象：<div><span>文字</span></div> 中给 <span></span> 加 text-align: center 没用；或者父 <div> 没设宽度、又没撑高，导致视觉上“看不出居中”。
<ul><li>父容器必须是块级（如 <code><div>、<code><p></p>），且不能是 display: inline-block 或 flex/grid（会破坏文本流）
float、position: absolute 或 display: flex，text-align 对其内部行内内容仍有效，但对子块级元素无效<img> 默认是 display: inline，所以也吃 text-align；但加了 display: block 后就失效了为什么 img 或按钮文字居中失败？检查 display 和定位
很多翻车不是因为写错了样式，而是元素悄悄脱离了文本流。比如：
<img src="x.jpg" style="max-width:90%"> → text-align: center 失效，因为浮动让它脱离行盒
<button style="position: absolute">点我</button> → 即使父容器有 text-align: center，它也不再参与文本排布
- 用浏览器开发者工具检查元素的
display值：如果是block、flex、grid，text-align就只影响它内部的纯文本或未脱离流的行内子元素 -
<input type="button">和<button></button>默认是inline-block，所以能被text-align: center居中（只要没额外设display: block） - 如果父容器是
display: inline-block，它自己需要被更上层的text-align: center居中，而不是靠自己设
单行行内元素垂直居中：line-height 是最轻量解法
当父容器高度固定，且只含单行文字或一张图片时，line-height 等于容器高度，就能让内容在行盒内垂直居中——这是纯 CSS 最少代码的方案。
示例：<div style="height: 60px; line-height: 60px; text-align: center;">Hello</div>
- 仅适用于单行，多行会撑高行盒导致溢出或错位
-
<img>需配合vertical-align: middle才能和文字对齐，否则默认基线对齐，看起来偏低 - 如果父容器用了
padding，line-height应基于内容区高度计算，不是总高 - 不要和
flex混用：一旦父容器设了display: flex，line-height和text-align都不再控制垂直位置
现代项目慎用 text-align 实现复杂居中
如果你的目标是让一个 <div> 里的图标 + 文字整体水平居中，同时还要垂直居中，<code>text-align: center 只解决一半问题，而且容易被后续样式覆盖或干扰。
此时更可靠的做法是把父容器设为 display: flex，用 justify-content: center + align-items: center —— 它不依赖文本流，对 <img>、<span></span>、<button></button> 全部一视同仁。
- 注意：Flex 会让所有直系子元素变成 Flex 项目，
float、vertical-align、传统margin对齐全部失效 - 如果父容器本身是导航栏或卡片，已有其他布局逻辑，强行加
flex可能破坏原有结构 - 兼容性已不是问题：Chrome/Firefox/Safari/Edge 全支持，IE11 也支持基本 flex 居中（需加
-ms-前缀）
真正难的不是选哪种方法，而是判断“你到底想居中什么”：是文字在段落里？还是按钮在卡片里？或是弹窗在视口里？对象不同，解法就根本不同。混用规则只会让调试时间翻倍。
