文本居中用 text-align: center，仅对行内内容生效；块级元素水平居中用 margin: 0 auto（需定宽且非浮动/绝对定位）；Flex 布局推荐 justify-content 和 align-items 双居中；绝对定位居中需配合 transform: translate(-50%,-50%)。
用 text-align: center 居中文本，但别对块级容器乱用
这是最常用也最容易出错的方式。它只对**行内内容生效**，比如文字、<span></span>、<img alt="HTML怎么居中元素_HTML文本居中方法教程【进阶】" >（默认 inline），但对 <div>、<code><section></section> 这类块级元素本身没用——你设了 text-align: center，只是让它的子文本居中，不是让这个 div 自己在父容器里居中。
常见错误现象：div 宽度不满屏，却以为加了 text-align: center 就能把它“摆中间”，结果它还是靠左贴边。
- 适用场景：段落、标题、按钮文字、导航链接等纯文本或行内元素的水平居中
- 注意
text-align不影响元素自身的定位，只控制其内部行内内容的对齐方式 - 如果想让一个定宽
div水平居中，得用margin: 0 auto，且该元素不能是float或position: absolute
让块级元素水平居中：优先用 margin: 0 auto，但必须满足条件
这是最轻量、兼容性最好的方案，但有硬性前提：元素得有明确宽度（width 或 max-width），且不能是 display: inline 或 display: flex 等会破坏块级流的行为。
常见错误现象：没设 width，或者用了 display: inline-block 却忘了父容器也要配 text-align: center。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
width（如width: 300px或width: 80%） - 不能同时设
float，否则margin: 0 auto失效 - 在 Flex 容器里它完全无效——Flex 有自己的居中逻辑，别混着用
Flex 布局居中：三行代码解决多数居中需求
现代项目首选。父容器设 display: flex，再加两行声明就能搞定水平+垂直居中，不依赖宽高，也不怕子元素类型。
常见错误现象：只写了 justify-content: center，忘了 align-items: center，结果只水平居中、垂直依然靠顶；或者父容器没设高度，导致垂直方向“没地方可居中”。
- 父容器必须有可计算的高度（比如
min-height: 100vh或显式height） -
justify-content: center控制主轴（默认是水平）居中 -
align-items: center控制交叉轴（默认是垂直）居中 - 如果子元素是单行文本，
text-align: center仍需保留，避免换行后不对齐
绝对定位居中：适合脱离文档流的弹窗或提示框
当元素需要脱离正常布局（比如遮罩层、tooltip），又必须精准居中时，用 position: absolute 配合 transform 最稳妥。
常见错误现象：只写 left: 50% 和 top: 50%，结果左上角在中心，整个元素偏右下；或者忘了给父容器加 position: relative，导致它相对于 body 定位。
- 父容器必须设
position: relative（或其他非static值）作为定位上下文 - 子元素设
position: absolute; left: 50%; top: 50%后，一定要加transform: translate(-50%, -50%)才真正居中 - 不推荐用于常规内容区域——它绕过文档流，可能影响可访问性和响应式行为
居中看着简单，实际卡点全在“谁相对谁居中”和“当前渲染模式是否支持”。Flex 是目前最省心的通用解法，但老项目里 margin: 0 auto 和 text-align 的边界条件必须盯紧。别假设浏览器会猜你想居中哪儿——它只按规则执行。
