HTML元素居中无万能解，需据场景选法：块级元素用margin:0 auto（需设width且父为常规流）；行内级用text-align:center（作用于父容器）；任意元素完全居中用position+transform；Flex布局用justify-content与align-items联合。
HTML元素居中没有“万能解”，不同场景得用不同方法——选错方案轻则布局错位，重则在移动端失效或触发意外重排。
块级元素水平居中用 margin: 0 auto
这是最常用也最容易出错的方式。它只对设置了明确 width 的块级元素生效，且父容器必须是常规文档流（不能是 display: flex 或 position: absolute）。
- 常见错误：给
<div> 直接加 <code>margin: 0 auto却没设width，结果毫无反应 - 适用场景：固定宽的卡片、表单容器、logo 区域等
- 注意：
text-align: center对块级元素无效，别混用 - 示例：
<div style="width: 300px; margin: 0 auto;">我居中了</div>
- 常见错误：在父元素上写了
text-align: center，但子元素用了display: block且没设宽度，结果还是左对齐 - 技巧：给
img加display: inline-block后就能被text-align控制 - 兼容性好，IE8+ 都支持，适合老项目维护
- 核心写法：
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) - 必须确保父容器有
position: relative（或absolute/fixed），否则会相对于 viewport 定位 - 性能友好：
transform触发 GPU 加速，比改left/top更流畅 - 注意：如果父容器高度为
auto且无内容撑开，可能“居中”到页面顶部下方——实际是父容器太矮 - 水平+垂直居中只需两行：
display: flex;<br>justify-content: center;<br>align-items: center;
- 父容器需有明确高度（比如
height: 100vh），否则align-items可能没效果 - 移动端 Safari 旧版本对
flex的min-height处理异常，建议用height而非min-height作容器约束 - 不推荐对
body直接设display: flex，容易干扰全局样式继承
行内/行内块元素居中用 text-align: center
这个属性作用于父容器，影响其内部所有行内级内容（span、img、button 等），但对子元素是否“块级”不敏感——只要它表现得像行内元素就行。
任意元素完全居中用 position + transform
当需要把一个元素（无论宽高是否已知）在父容器里真正居中（水平+垂直），这是最稳妥的兜底方案。
立即学习“前端免费学习笔记（深入）”；
Flex 布局居中要同时控制主轴和交叉轴
display: flex 是现代方案，但很多人只写 justify-content: center，忘了垂直方向。
真正难的不是写出某一种居中代码，而是看懂当前 DOM 结构、父容器的定位方式和尺寸约束——很多时候问题不在“怎么居中”，而在“为什么它不肯居中”。
