flexbox 居中需父容器设 display: flex、justify-content: center 和 align-items: center，并有明确高度；子元素不能脱离 flex 流；grid 居中用 place-items: center 更纯粹，不改变文档流；margin: auto 在 flex 中也可居中但优先级更高。
flexbox 实现单个子元素水平垂直居中
对父容器设置 display: flex，再用 justify-content: center 和 align-items: center 即可完成居中。这是最常用、兼容性足够（Chrome 29+/Firefox 28+/Safari 9+/Edge 12+）的方案。
注意点：
- 父元素必须有明确高度（比如
height: 300px或min-height: 100vh），否则align-items: center在无约束高度下可能无效 - 子元素不能设置
float、position: absolute或display: inline等会脱离 flex flow 的属性，否则会被忽略居中逻辑 - 如果子元素是文字，且父容器未设
text-align: center，行内元素本身仍可能左对齐（但整体位置已居中）
div.container {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
border: 1px solid #ccc;
}
<p>div.content {
width: 100px;
height: 100px;
background: #007bff;
}grid 实现单个子元素水平垂直居中
对父容器设 display: grid，配合 place-items: center —— 这是 justify-items 和 align-items 的简写，专为居中设计。它比 flex 更“纯粹”，不改变子元素的文档流语义，也无需担心 flex-direction 干扰。
适用场景：
立即学习“前端免费学习笔记（深入）”；
- 父容器内容简单、结构固定（如模态框、加载图标容器）
- 需要同时控制多个子项的网格位置（后续扩展性强）
- 项目需支持现代浏览器（Chrome 57+/Firefox 52+/Safari 10.1+/Edge 16+），不需兼容 IE
常见错误：误用 place-content: center —— 它作用于整个网格容器的内容区域（包括多行多列间隙），不是针对单个子项；而 place-items 才真正控制子项自身对齐。
div.container {
display: grid;
place-items: center;
height: 400px;
border: 1px solid #ccc;
}
<p>div.content {
width: 100px;
height: 100px;
background: #28a745;
}flexbox 居中时遇到 margin auto 不生效？
当子元素是块级元素且父容器是 flex 时，margin: auto 在主轴和交叉轴上都有效——但它会覆盖 justify-content 和 align-items。也就是说，只要子元素没设固定尺寸，margin: auto 就能实现居中，而且优先级更高。
但要注意：
- 必须确保子元素没有设置
align-self（它会干扰交叉轴上的margin: auto） - 若子元素是
inline或inline-block，margin: auto在 flex 容器中无效，必须先设display: block - 在老版本 Safari（margin: auto 在交叉轴方向可能失效，此时应回退到
align-items: center
grid 中多子元素如何分别居中？
如果父容器里有多个子元素，又希望每个都独立居中（比如卡片列表中的每张卡片内容），别用 place-items——它会让所有子项叠在一起。应该用 place-self: center 给每个子项单独设置。
更灵活的做法是定义显式网格线 + justify-self / align-self：
-
justify-self: center控制单个子项在列方向的位置 -
align-self: center控制单个子项在行方向的位置 - 两者合起来等价于
place-self: center
这时候父容器只需 display: grid，无需其他对齐声明，每个子项互不影响。
div.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
<p>div.card {
place-self: center; /<em> 每个 card 自己居中 </em>/
width: 120px;
height: 120px;
background: #6f42c1;
}实际项目中，flexbox 居中更轻量、容错率高；grid 居中更语义清晰、扩展性好。选哪个，取决于你是否需要后续添加网格布局能力，以及目标浏览器范围。IE11 不支持 grid 的居中语法，但支持 flex；如果必须兼容 IE11，就别碰 place-items。
