flex水平垂直居中需父容器设display: flex、justify-content: center、align-items: center及明确高度（如100vh）；grid则用place-items: center更简洁，但兼容性受限；margin: auto垂直居中仅在绝对定位+四边为0时生效。
flex 实现水平垂直居中：最简写法与常见陷阱
用 display: flex 居中，核心是父容器设 justify-content: center 和 align-items: center。但要注意：父元素必须有明确高度（比如 height: 100vh），否则子元素会随内容撑高，看起来没居中。
- 父容器需设置
display: flex，且不能是inline-flex（否则高度行为异常） - 子元素不能设
margin: auto再叠加justify-content，会导致行为冲突 - 若子元素是绝对定位的，
flex居中完全失效——flex 只作用于 flex item，不处理脱离文档流的元素
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 关键：必须有高度 */
}
grid 实现居中：一行代码够用，但兼容性要看场景
display: grid 配合 place-items: center 是最简洁的写法，等价于 justify-items: center + align-items: center。它对单个子元素居中非常直接，但注意：该属性只影响 grid container 的直接子项，嵌套层级多时容易误判作用对象。
-
place-items在 Firefox、Chrome 85+、Safari 14.1+ 支持良好；IE 完全不支持 - 如果父容器已有
grid-template-areas或显式行列定义，place-items仍生效，但可能被justify-self/align-self覆盖 - 不要和
place-content混用：place-content控制的是整个 grid track 的对齐，不是 item
.container {
display: grid;
place-items: center;
height: 100vh;
}
为什么不用 margin: auto？哪些情况它会失效
margin: auto 在块级元素上仅能实现水平居中；要垂直居中，必须满足三个条件：父容器为 display: block 且有固定高度、子元素为绝对定位、同时设 top: 0; bottom: 0; left: 0; right: 0，再加 margin: auto 才生效。
- 常见错误：给普通
div直接写margin: auto并期待垂直居中 → 不生效 - Flex 或 Grid 容器里的子元素，
margin: auto会沿主轴/交叉轴拉伸，行为不可控，建议避免混用 - 在 table-cell 中
vertical-align: middle配合text-align: center虽可行，但语义混乱、维护成本高，已不推荐
实际项目中怎么选：看浏览器支持和嵌套复杂度
如果目标环境包含 IE11，flex 是更稳妥的选择（需加 -webkit- 前缀，且避免使用 gap）；若只需支持现代浏览器，grid 的 place-items 更干净。但遇到多层嵌套或动态插入内容时，flex 的 align-items 更容易受父级 flex-direction 影响，而 grid 的 place-items 行为更稳定。
立即学习“前端免费学习笔记（深入）”；
- 不要为了“炫技”强行统一用 grid：已有 flex 布局的模块，再套一层 grid 容器反而增加渲染负担
- 动画场景下，flex 的
align-items在过渡中更平滑；grid 的place-items在改变容器尺寸时重排更果断 - 最容易被忽略的一点：无论 flex 还是 grid，都要求父容器本身在视口中有确定的尺寸边界，否则居中只是“看起来对”，一缩放或响应式切换就偏移
