绝对定位下子元素垂直居中必须配合top: 50%和transform: translateY(-50%)，仅top: 50%只能使上边缘对齐父容器中线；父容器需设position: relative，子元素需有明确高度或能自然撑开，动态高度场景推荐Flex布局。
绝对定位下子元素垂直居中要靠 top 和 transform
单纯用 position: absolute + top: 50% 只会让元素上边缘到父容器中间，不是真正居中。必须配合 transform: translateY(-50%) 把自身向上拉回一半高度。
常见错误是只写 top: 50%，结果元素整体偏下了——因为没抵消自身高度。
- 父容器必须设
position: relative（或其它非 static 定位），否则绝对定位会相对于 body - 子元素需有明确高度（或能自然撑开），否则
transform: translateY(-50%)的基准不确定 - 如果子元素高度动态（比如文字行数不定），优先考虑 Flex 布局，绝对定位在这种场景易出错
用 flex 实现更稳妥的“伪绝对垂直居中”
当父容器内容简单、结构可控时，display: flex + align-items: center 是比绝对定位更健壮的选择，尤其适合响应式或内容变动频繁的场景。
它不依赖尺寸预知，也不需要手动计算偏移，浏览器自动处理对齐逻辑。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex和align-items: center即可，无需设高度（但要有高度或 min-height 才能看见效果） - 若还需水平居中，加
justify-content: center - 注意：flex 会改变子元素的盒模型行为，比如
vertical-align失效、margin合并规则变化
line-height 法仅适用于单行纯文本
对只有单行文字的内联元素（如 <span> 或 <div> 里无换行文本），设 line-height 等于容器高度，能快速实现视觉垂直居中。
但它本质是让行框居中，一旦内容换行或含图片、按钮等块级/替换元素，就完全失效。
- 必须确保内容为单行，且容器高度固定
-
line-height值需严格等于父容器height，不能用em或rem模糊匹配 - 文字溢出时不会自动隐藏，需额外加
overflow: hidden和white-space: nowrap
避免在 table-cell 中硬套 vertical-align: middle
虽然 display: table-cell + vertical-align: middle 能垂直居中，但它的布局行为和表格一样——宽度由内容撑开、换行表现异常、响应式支持差。
现代项目里基本没有非要选它的理由，除非要兼容 IE8 及更老版本。
- table-cell 会忽略
margin，要用padding控制间距 - 父容器必须设
display: table，且不能设width: 100%后再内部定宽，容易触发怪异缩放 - 与 Flex 或 Grid 相比，调试困难，CSS 规则耦合度高
position: absolute 不可；其余多数情况，Flex 更省心也更可靠。 
