现代网页元素水平垂直居中主流方案有三：Flex（推荐新手掌握，需父容器设display: flex、justify-content和align-items均为center、有明确高度）、Grid（place-items: center一行生效，要求display: grid，不兼容IE）、绝对定位（top/left: 50%+transform: translate(-50%, -50%)，兼容IE9+但需父容器position: relative）。
现代网页里让元素水平垂直居中，不用写十几行 hack 代码，主流就三招：Flex、Grid、绝对定位。其中 Flex 是新手最该先掌握的，它逻辑直白、容错率高、浏览器支持好（Chrome 29+、Firefox 20+、Safari 6.1+ 都没问题）。
display: flex + justify-content/align-items 怎么写才生效
很多人写了 justify-content: center 却发现只水平居中，垂直没动——根本原因是漏了 align-items: center，或者父容器没高度约束。
- 父容器必须设
display: flex，不能只给子元素加 - 必须同时写
justify-content: center（主轴居中，默认是水平）和align-items: center（侧轴居中，默认是垂直） - 父容器要有明确高度，比如
height: 100vh或min-height: 400px；靠内容撑开也行，但空容器会塌陷 - 子元素别再写
margin: auto，它和 flex 居中冲突，尤其在 Safari 下可能失效
示例：
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 关键 */
}
.content {
width: 300px;
height: 200px;
background: #eee;
}
place-items: center 在 Grid 中怎么用
Grid 的 place-items: center 是一行顶两行，语义更干净，但要求父容器是 display: grid，且只适用于单个子元素或需统一居中的多个子元素。
- 不依赖父容器是否设高度，只要它有尺寸（哪怕由内容撑开）就能生效
- 如果父容器里有多个子元素，
place-items: center会让它们全部居中堆叠，不是网格分布——需要网格布局请改用place-content或显式定义 grid-template - IE 不支持，如需兼容 IE11，别用这个
示例：
.box {
display: grid;
place-items: center;
min-height: 100vh;
}
.content { width: 300px; height: 200px; }
position: absolute + transform(-50%, -50%) 容易错在哪
这是兼容性最好的方案（IE9+），但新手常栽在定位上下文缺失或 transform 写法不全上。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，否则top: 50%会相对于 viewport 计算，元素飘到左上角外 - 子元素要同时写
top: 50%和left: 50%，缺一不可 -
transform: translate(-50%, -50%)必须完整写，不能拆成translateX和translateY单独调用（虽等效，但多一步就多一个出错点） - 图片或异步加载内容可能因尺寸未定导致短暂偏移，可加
min-width/min-height或占位符缓解
示例：
.box { position: relative; height: 100vh; }
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
text-align: center 和 line-height 只适合文字
这是最轻量的方案，但仅限单行文本或行内元素（如 <img>），且垂直居中靠的是“视觉欺骗”。
-
text-align: center只作用于父容器内的行内级内容，对块级子元素无效 -
line-height等于容器高度时，单行文字会“看起来”垂直居中；一旦换行或内容高度超限，立刻失准 - 不要试图用它居中 div、按钮或表单控件——那是误用
正确用法：
.title {
text-align: center;
line-height: 200px; /* = 容器 height */
height: 200px;
}
实际项目里，优先选 Flex；若布局本身已是 Grid，顺手用 place-items 更省事；老系统维护或需兼容 IE，再上绝对定位。别为“看起来居中”硬套 line-height，也别在 flex 容器里混用 margin: auto——这些坑，踩一次就够记半年。
