flex垂直居中失效主因是父容器无明确高度或漏写align-items: center；正确写法需同时设justify-content: center和align-items: center，并确保父容器有height（如100vh）。
现代项目里，display: flex 是最可靠、写法最直白的垂直居中方案，但必须满足两个硬条件：父容器有明确高度，且子元素不被意外压缩或撑开。
flex布局为什么只水平居中、不垂直居中？
常见现象是写了 justify-content: center 但内容没垂直居中——根本原因就两条：
- 父容器没设
height（比如只写了min-height或依赖内容自适应），align-items: center就失去参考基准； - 漏了
align-items: center，或者误写成align-content（后者只对多行 flex 容器生效）； - 子元素是
inline类型（如span），而父容器未设font-size: 0或未统一display，导致基线对齐干扰视觉中心。
正确写法示例：
div.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 必须有明确高度 */
}absolute + transform 居中时元素“飘偏了”怎么办？
典型错误是只写 top: 50% 和 left: 50%，结果元素左上角卡在中心点，而不是自身中心对齐。
立即学习“前端免费学习笔记（深入）”；
- 必须同时加
transform: translate(-50%, -50%)，回拉自身宽高的一半； - 父容器得是
position: relative，否则top/left会相对于 viewport 定位； - IE9 支持
transform，但对inline元素无效，建议包裹一层div再定位； - 如果子元素宽高动态变化（比如响应式文字），这个方法依然有效，但频繁重排可能影响性能。
关键代码片段：
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}vertical-align: middle 为什么完全没反应？
这不是 bug，而是它根本就不是为“容器内居中”设计的：vertical-align 只对 display: inline、inline-block、table-cell 元素生效，作用对象是“行框内的基线对齐”，不是父容器的中线。
- 对块级
div或默认p写vertical-align: middle，浏览器直接忽略； - 想用它居中文本和图标，得确保它们同级、都是
inline-block，且父容器清除行内间隙（常用font-size: 0）； - 配合
display: table-cell能强制生效，但会破坏语义结构，且vertical-align会继承影响内部所有文本。
line-height 实现单行文本垂直居中要注意什么？
这是最快方案，但适用边界极窄：仅限容器高度固定、内容严格单行、字体大小稳定。
- 设
height: 40px就必须配line-height: 40px，差 1px 都会偏移； - 多行文本会撑高容器，
line-height失效，文字可能被截断； -
line-height是相对值，若父元素设了font-size: 1.2em，那line-height: 40px实际会按比例缩放，不再是精确像素； - 响应式场景下，字号随屏幕缩放时，这个方案极易露馅。
真正难的不是选哪种方法，而是看清你面对的是“固定尺寸弹窗”、“流式卡片”还是“动态文字按钮”——不同约束下，flex 的简洁性、absolute + transform 的确定性、甚至 table-cell 的兼容性，各自都有不可替代的临界点。
