top: 50% + transform: translateY(-50%) 能稳定垂直居中，因先将元素上边缘移至父容器垂直中心，再向上平移自身高度一半；需父容器相对定位、子元素绝对或固定定位，且父容器须有明确高度。
用 top: 50% + transform: translateY(-50%) 是目前最常用、兼容性好且无需知道元素高度的垂直居中方案，比 margin 负值或 table 布局更灵活可靠。
为什么这个组合能稳定居中
它分两步完成：先用 top: 50% 把元素上边缘移到父容器垂直中心线，再用 transform: translateY(-50%) 向上平移自身高度的一半，让元素视觉中心对齐中心线。关键是 transform 的百分比基于元素自身尺寸，不依赖父级设定，也不触发重排。
必须配合的定位前提
该方法只在已定位元素上生效，需确保父容器有 position: relative（或 static 以外的值），子元素设为：
- position: absolute（最常见，脱离文档流）
- 或 position: fixed（适合模态框等全屏场景）
- 若用 position: relative，则相对自身原位置偏移，慎用
一行代码搞定水平+垂直居中
想同时居中？加一句 left: 50% 和 transform: translate(-50%, -50%) 即可：
立即学习“前端免费学习笔记（深入）”；
.centered {position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注意几个易错点
- 父容器没设 height 或内容塌陷时，50% 会失效——确保父容器有明确高度（如 min-height: 100vh）
- transform 不能写成 translateY(-50px)——必须用百分比，否则无法适配不同尺寸元素
- 旧版 Safari 对 transform 兼容略差，可加 -webkit-transform 前缀保底（iOS 9+ 基本不用）
基本上就这些。简单、有效、不依赖 JS，日常开发中放心用。
