display: flex最稳，需设父容器高度并同时用justify-content和align-items；absolute+transform适合局部精确居中；vertical-align仅对行内元素有效；grid的place-items简洁但需注意兼容性和布局上下文。
用 display: flex 最稳，但得注意父容器高度
绝大多数现代项目里，display: flex 是水平垂直居中的首选方案，不是因为它最炫，而是它对齐逻辑直白、浏览器兼容性好（Chrome 21+/Firefox 20+/Safari 6.1+ 都支持），而且不依赖内容尺寸。
常见错误是只写 display: flex 和 justify-content: center，结果内容只水平居中了——漏了 align-items: center，或者父容器没设高度，导致 align-items 失效。
- 父容器必须有明确高度（比如
height: 100vh或固定像素值），否则垂直方向没“参考系” - 如果子元素是块级且高度超出父容器，
align-items: center仍会居中其基线位置，不是视觉中心——此时可加flex-shrink: 0防压缩 - 避免在 flex 容器上同时用
text-align: center，它对块级子元素无效，纯属干扰
div.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 关键 */
}
position: absolute + transform 适合局部精确控制
当你要居中的不是整个页面，而是某个弹窗、提示框或绝对定位的 UI 元素时，position: absolute 配合 transform: translate(-50%, -50%) 更灵活，尤其适合动态插入的 DOM。
典型翻车点：只写 left: 50% 和 top: 50%，但忘了 transform——结果是左上角顶在中心，不是元素中心对齐。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须同时设置
left: 50%和top: 50%，再用transform: translate(-50%, -50%)回拉自身宽高的一半 - 父容器得是相对定位（
position: relative），否则会相对于 viewport 定位 - IE9+ 支持
transform，但 IE9 不支持transform对inline元素生效，建议包裹一层div
.popup {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}别碰 vertical-align 居中文字或行内元素
vertical-align 常被误当成“垂直居中神器”，其实它只对 inline、inline-block 元素以及表格单元格（td）有效，且作用对象是“行框内的基线对齐”，不是容器的中线。
你写 vertical-align: middle 却发现没反应？大概率是因为目标元素是块级（div、p），或者父容器不是 table-cell 或行内上下文。
- 想用
vertical-align居中文本和图标，确保它们同级且都是inline-block，父容器font-size: 0可消间隙 - 配合
line-height居中单行文本，仅限高度固定的容器，多行就失效 - 不要给
div直接设vertical-align，它不会生效，控制台也不会报错——静默失败最坑
Grid 方案简洁但得看场景
display: grid 的 place-items: center 一行搞定居中，语义清晰，适合现代布局，但它要求父容器是网格容器，且子元素不能是 float 或 position: absolute 的——这些会被自动转为网格项，行为可能意外。
容易忽略的是：Grid 居中默认基于网格轨道（grid track），如果父容器没有显式定义 grid-template-rows 或 grid-template-columns，它会按内容自动生成单行单列轨道，此时居中才有效；否则可能被隐式网格撑开。
- 简单居中直接写
display: grid; place-items: center，比 flex 少两行声明 - 若父容器已有复杂 Grid 布局（比如多列），
place-items会影响所有子项，不如用justify-self+align-self精确控制单个子项 - 不支持 IE，Edge 16+ 才开始支持
place-items，旧项目慎用
真正麻烦的从来不是“怎么写”，而是“为什么写了没效果”——多数时候卡在父容器没高度、定位上下文缺失、或把居中属性用在了不支持的元素类型上。动手前先打开 DevTools 看一眼 computed 样式，比查文档更快。
