margin: 0 auto 仅实现水平居中，需配合 width 使用；垂直居中应采用 flex 布局（父容器设 display: flex、justify-content: center、align-items: center）或绝对定位加 transform。
margin: 0 auto 只能水平居中，且必须设 width
很多人一写 margin: 0 auto 就指望元素上下左右都居中，结果发现它只管左右——垂直方向完全没反应。这是因为 margin: 0 auto 的机制只在块级元素的**水平方向**触发自动等分外边距，垂直方向的 margin: auto 在常规文档流里根本不起作用。
常见错误现象：div 加了 margin: 0 auto 还是贴着顶部；或者加了 height: 100vh 但内容依然不垂直居中。
- 必须显式设置
width（比如width: 400px或width: 80%），否则浏览器无法计算左右空多少 - 元素得是块级（
display: block或默认行为），inline元素不认这个规则 - 父容器不能是
text-align: left且子元素为display: inline-block——这会干扰布局，真要这么用，父容器得同步加text-align: center
flex 布局：一行代码搞定水平 + 垂直居中
想真正实现上下左右居中，display: flex 是目前最直接、兼容性足够好的方案。关键不是给目标元素加样式，而是**给它的父容器**设 flex 属性。
典型错误：在要居中的 div 上写 display: flex，结果毫无变化——那是错把 flex 用在了子元素上。
- 父容器加
display: flex+justify-content: center→ 水平居中 - 再加
align-items: center→ 垂直居中（交叉轴对齐） - 老版本 Safari（iOS 9 / macOS 10.11 之前）需要前缀：
display: -webkit-flex和-webkit-justify-content: center - 别直接在
body上写display: flex，可能意外影响所有子元素排版；建议包一层<main></main>或<div class="container"> <h3>绝对定位 + transform：适合脱离文档流的弹窗或提示框</h3> <p>当元素需要脱离正常文档流（比如模态框、tooltip），<code>position: absolute配合transform: translate(-50%, -50%)是精准居中的可靠组合。注意：这不是“让元素在页面里居中”，而是“让元素相对于其包含块（通常是最近的
position: relative父容器）居中”。如果父容器没设position: relative，它就相对于body定位，容易出偏移。- 父容器需设
position: relative（否则子元素按body计算偏移） - 子元素设
position: absolute+top: 50%+left: 50% - 必须加
transform: translate(-50%, -50%)，否则只是左上角顶点移到中心 - 该方法对宽高是否已知无要求，适合内容动态、尺寸不确定的场景
表格单元格里文字右对齐？别用 align 属性
<td align="right"> 看起来快，但 HTML5 已废弃，W3C 验证器报错，Firefox 新版忽略，Chrome 行为也不稳定。真正生效且跨浏览器一致的，只有 CSS 的 <code>text-align。容易混淆的点：
<table align="center"> 不是让表格里文字居中，而是让整个表格在页面中居中浮动——它作用对象是表格自身，和单元格内容无关。 <ul> <li>单个单元格：用内联样式 <code><td style="text-align: right">¥1,234.56</td> - 父容器需设
- 整列统一：用
<col class="amount">+.amount { text-align: right; } - 数字右对齐时，建议加
font-family: monospace，避免小数点错位（因为等宽字体下每位数字宽度一致） -
text-align对display: flex的单元格无效——flex 容器内部靠justify-content控制
transform，也别指望 margin: auto 能扛起垂直方向——那是它从没承诺过的责任。
