text-align: center 只使块内行内内容居中，不能使块自身居中；margin: auto 水平居中需块级+定宽；flex 是最可靠双轴居中方案。
为什么 text-align: center 对块级元素无效
text-align 只控制**行内内容在块容器中的水平对齐**，不是让整个块居中。常见误解是给 div 加 text-align: center 就能居中它自己——其实它只是让子元素里的文字、span、img（作为行内元素）居中，父 div 本身仍左贴边。
- 适用场景：居中按钮文字、段落内图片、导航项内的图标文字
- 错误用法：
div { text-align: center; } /* 期望 div 居中？不生效 */ - 真正起效的是：
.container { text-align: center; }
.container img { /* img 是行内元素，会被居中 */ }
margin: auto 在什么条件下才居中块元素
margin: auto 能让块级元素水平居中，但有硬性前提：该元素必须是**块级且设置了明确宽度**（width 或 max-width），否则浏览器无法计算左右 margin 的“剩余空间”。
- 有效示例：
.box { width: 300px; margin: 0 auto; } - 无效情况：
width: 100%、width: fit-content（未设宽）、display: inline-block（未配合父级text-align） -
垂直居中？不行：
margin: auto在垂直方向对常规流块元素无效（除非是绝对定位或 flex 子项）
统一用 flex 实现水平+垂直居中（推荐方案）
Flex 是目前最可靠、语义清晰、一行代码解决双轴居中的方式，适合初级项目快速落地，无需记忆各种限制条件。
- 父容器设置：
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
} - 子元素无需设宽高、无需
margin、无需position，直接渲染即可 - 兼容性：现代浏览器全覆盖（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+），IE10+ 需加
-ms-前缀（但初级项目通常不需支持 IE） - 注意点：父容器需有明确高度（如
height: 100vh或固定值），否则align-items: center垂直效果可能不明显
遇到多层嵌套或响应式时 flex 还安全吗
Flex 的优势恰恰体现在嵌套和响应式中——它不依赖全局样式，每个容器独立控制自己的布局逻辑，比 position + transform 或 table-cell 更易维护。
立即学习“前端免费学习笔记（深入）”；
- 响应式建议：
flex-direction: column配合justify-content在小屏堆叠居中，大屏切回row - 避免陷阱：不要在 flex 容器上同时用
float或vertical-align，它们会失效 - 调试技巧：浏览器开发者工具中勾选“Show flexbox overlays”，能直观看到主轴/交叉轴方向和对齐结果
- 复杂居中（比如一个弹窗既要居中又要限制最大宽度）：
.modal {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.modal-content { max-width: 500px; width: 90%; }
Flex 居中看似简单，但真正容易出问题的地方在于父容器的尺寸是否被正确触发（尤其是高度）、是否意外继承了其他布局模式（如 float 或 position: absolute），这些细节比写法本身更值得花时间检查。
