text-align: center 必须写在父容器上，对内联级内容（如文字、span、img）生效，对块级子元素无效；常见错误是直接加在p或span上，正确做法是设在包裹它们的div等块级父容器上。
text-align: center 必须写在父容器上
直接给 <p></p> 或 <span></span> 加 text-align: center 是无效的。这个属性只对块级容器起作用，且只影响它内部的行内内容（比如文字、<img>、<u></u> 等）。
常见错误现象：<div><p style="text-align: center">文字</p></div> 里文字没居中——因为 <p></p> 自身是块级元素，text-align 在它身上不起作用；真正该加的地方是外层 <div>。
<ul>
<li>正确写法：<code><div style="text-align: center">
<p>文字</p>
<img src="a.jpg">
</div>
<img> 默认是行内元素，所以会被父容器的 text-align 控制display: flex 或 display: grid，text-align 会失效——它只在传统文档流中有效margin: 0 auto 只对块级元素生效，且必须有 width
想让一个 <div> 或 <code><section></section> 在页面中水平居中？margin: 0 auto 是最兼容的老办法，但它有硬性前提：元素得是块级、不能浮动、不能绝对定位、父容器不能是 flex/grid，而且必须设 width（或 max-width）。
常见错误现象：写了 margin: 0 auto 没反应——八成是漏了 width，或者父容器用了 display: flex。
-
<div style="width: 600px; margin: 0 auto">内容</div>才能居中 -
<img>要走这条路，得先加display: block，否则它是行内元素，margin: 0 auto不生效 - IE8+ 都支持，但完全不管垂直方向
垂直居中别硬套 line-height，注意适用范围
line-height 等于容器高度，确实能让单行文字垂直居中，但它只适用于纯文本、无换行、且高度固定的情况。一旦内容多行、字体大小变化、或容器高度不固定，就会错位甚至溢出。
常见错误现象：用 line-height: 200px 给一个含两段文字的 <div> 设垂直居中，结果第二段文字被挤到看不见的位置。
<ul>
<li>安全用法：<code><div style="height: 60px; line-height: 60px; text-align: center">单行文字</div>
<p></p> 或含 <br> 的内容用这个技巧Flex 布局居中要配齐三要素
现代项目首选 display: flex，但它不是写上就完事。水平居中靠 justify-content: center，垂直居中靠 align-items: center，而后者生效的前提是父容器有明确高度（比如 height: 100vh 或 min-height: 400px）。
容易被忽略的点：flex 容器会改变子元素默认行为——float、vertical-align、甚至 margin: 0 auto 全部失效。
- 基础写法：
<div style="display: flex; justify-content: center; align-items: center; height: 300px">内容</div> - 图文混排时，把
<p></p>和<img>包进一个子<div> 再居中，避免错位 <li>别直接在 <code>上设 flex，否则所有直系子元素都会变成 flex item，布局全乱
真正麻烦的从来不是“怎么写”，而是“为什么写了没效果”。多数居中失败，问题不在代码本身，而在元素类型、父容器状态、或 CSS 层叠顺序上。盯住控制台里的 computed 样式，比反复试错快得多。
