margin: 0 auto仅对设width的块级元素有效；Flexbox用justify-content和align-items可水平垂直居中；Grid用place-items: center更声明式；需注意父容器尺寸、定位及浏览器兼容性。
用 margin: 0 auto 居中块级元素（最常用但有限制）
这个方法只对设置了明确 Flexbox 是 HTML5 布局中最可靠、语义最清晰的居中方案，尤其适合响应式场景。只要父容器启用 完全居中 CSS Grid 更适合已有明确网格意图的布局，比如卡片列表、登录框等固定结构区域。它比 Flexbox 更“声明式”，但学习成本略高。 立即学习“前端免费学习笔记（深入）”； 很多居中失败不是写法错，而是忽略了上下文约束： 真正卡住人的，往往不是“怎么写”，而是“为什么写了没反应”——多检查父容器的 display、尺寸、定位这三层。width 的块级元素生效，比如 。它本质是把左右外边距设为“自动分配剩余空间”，所以必须有可分配的宽度余量。
display: block 或默认行为）width（如 width: 300px 或 width: 80%）display: flex 或 display: grid，否则会失效），也不管垂直居中
用 Flexbox 实现真·水平+垂直居中（推荐现代布局）
display: flex，子元素就能一键居中。
display: flex + justify-content: center（水平）align-items: center（垂直），两者缺一不可auto，垂直居中可能“看不见效果”，需确保父容器有高度（如 min-height: 100vh）用 Grid 实现单行/单列居中（适合结构化容器）
display: grid
place-items: center 一行搞定水平+垂直居中（等价于 justify-items: center; align-items: center）grid-template-columns: 1fr auto 1fr + justify-content: center
居中时容易被忽略的兼容性与陷阱
text-align: center 只影响行内内容（如文字、），对块级子元素无效position: absolute + transform: translate(-50%, -50%) 时，父容器必须是 position: relative，否则会相对于视口定位height: 100vh 或 JS 补偿
