padding实现视觉居中仅适用于固定高且内容不换行的容器；flex+align-items: center是现代标准解法；vertical-align对块级元素无效；绝对定位+transform适合脱离文档流场景。
用 padding 实现“视觉居中”只适用于固定高容器
这不是真正意义上的居中，只是让内容在容器内看起来上下对齐——前提是容器高度固定，且内容本身不换行、不溢出。padding-top 和 padding-bottom 设为相等值后，内容会从顶部往下推一半“留白”，再被底部留白托住，形成错觉。
常见错误现象：padding: 50px; 后文字还是偏上，或容器高度被撑开导致布局错乱。
- 必须确保父容器
height显式设置（比如height: 200px;），否则padding只是增加高度，不产生居中效果 - 内容若为多行文本或弹性子元素，
padding无法动态适配，容易出现顶部空太多、底部挤出的情况 - 移动端缩放或字体加载延迟时，
padding值可能和实际内容高度不匹配，造成瞬间偏移
display: flex + align-items: center 是更可靠的选择
这才是现代 CSS 中应对“内容上下居中”的标准解法，兼容性已覆盖所有主流浏览器（IE10+），且不依赖内容尺寸或容器高度是否固定。
使用场景：按钮文字、卡片标题、图标+文字组合、表单控件内部对齐。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex和align-items: center即可，无需计算任何数值 - 如果内容是块级元素（如
<div>），默认会拉伸高度，可加align-self: flex-start防止意外撑高 - 注意避免父容器同时设了
height和min-height，某些旧版 Safari 在 flex 容器中会对min-height处理异常
div.container {
display: flex;
align-items: center;
height: 80px; /* 可省略，flex 会自动包裹内容 */
}为什么不用 vertical-align？它根本不管用
vertical-align 只对 inline、inline-block 元素生效，且是对齐到**行框（line box）的基线**，不是相对于父容器。直接给块级盒子设 vertical-align: middle 完全无效。
常见错误现象：“加了 vertical-align: middle 没反应”“文字突然跑到左边去了”。
- 只有把子元素设成
display: inline-block并配合line-height或伪元素占位，才可能模拟居中——但极其脆弱，换字体、换字号就崩 -
vertical-align在表格单元格（td）里有效，但那是 table-layout 的行为，和普通 div 无关 - 千万别为了用
vertical-align而把整个布局改成display: table-cell，性能差、语义错、调试难
绝对定位 + transform 适合脱离文档流的场景
当内容需要脱离正常流（比如悬浮提示、弹窗标题），又不想依赖 flex 或 table 时，这个组合最稳妥。
原理：先用 top: 50% 把上边缘移到父容器中间，再用 transform: translateY(-50%) 自身回退一半高度。
- 父容器需设
position: relative，否则top会相对 viewport 定位 - 子元素必须有明确高度（或能被 JS/渲染引擎准确测量），否则
translateY(-50%)的基准不确定 - 如果子元素是响应式图片或字体图标，建议加
max-width: 100%或font-size: inherit避免缩放失真
.popup-title {
position: absolute;
top: 50%;
transform: translateY(-50%);
}CSS 居中看似简单，但每个方案背后都绑着特定约束。用 padding 看似最轻量，却最容易在响应式或动态内容里露馅；真正省心的，反而是写多两行的 display: flex。
