17370845950

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，日常开发中放心用。