text-align: center 只对块级容器内的行内内容有效，需写在<p><div><h1>等块级标签上；若父容器为flex则被justify-content覆盖；居中按钮需用inline-block+text-align、margin:0 auto（需设width）或flex方案。
text-align: center 写在哪才有效
它只对块级容器起作用，不是写在文字上，也不是写在 <span> 或 <u> 这类行内元素上。写错位置，代码就白写了。
- 正确做法：加在
<p>、<div>、<h1>这些块级标签的样式里，比如<p style="text-align: center">文字</p> - 错误写法：
<span style="text-align: center">文字</span>——<span>是行内元素，加了也无效 - 如果父容器用了
display: flex，text-align就被justify-content覆盖，此时它完全不生效
为什么文字没居中？先查这三件事
90% 的失败不是代码写错了，而是环境没配对。常见卡点就三个：
-
<p>外面包了一层没设text-align的<div>，而你只给<p>加了——它继承不到，得往上追一层 -
<p>里塞了float: left的图片或用了position: absolute的元素——这些内容已脱离文本流，text-align管不到 - 用
<div style="text-align: center"><div>文字</div></div>——里面那个<div>是块级，独占一行，text-align只影响行内内容，对它不起作用
要居中一个按钮或图标，不能只靠 text-align
text-align: center 居中的是“内容”，不是“元素自己”。想让一个 <button> 或 <img> 在页面里水平居中，得让它变成可被居中的对象。
- 方案一：给它加
display: inline-block，再确保父容器有text-align: center - 方案二：直接用
margin: 0 auto，但必须同时设width（比如width: 200px），否则无效 - 方案三：父容器设
display: flex+justify-content: center，最稳，不依赖宽高，也不怕嵌套干扰
垂直居中别硬套 line-height
line-height: 200px 配合固定高度容器，只适用于单行纯文本。一旦换行、加 padding、或者里面混了图标，就会错位甚至溢出。
立即学习“前端免费学习笔记（深入）”；
- 多行文本垂直居中，推荐父容器用
display: flex+align-items: center - 老项目兼容 IE9 及更早版本，可用
display: table-cell+vertical-align: middle，但需额外包裹一层 - 绝对定位 +
transform: translate(-50%, -50%)也能用，但要确保父容器有position: relative，且容易和其它定位冲突
