要说最常用的垂直居中方案，position: absolute 配合 top: 50% 和 transform: translate(-50%, -50%) 绝对是首选——兼容性好且适应性强。不过前提是父容器必须设置 position: relative（或其他非 static 定位），否则后续操作都无法生效。
为什么选择 transform 而非负 margin？
负 margin 有一个明显缺陷：你需要事先计算子元素的高度，例如 margin-top: -60px。一旦内容动态变化或响应式缩放，这个固定值就难以适配，偏移几乎不可避免。而 transform: translate(-50%, -50%) 的百分比是相对于元素自身宽高计算的，完全无需关心内部装了什么——多行文本也好，图文混排也罢，都能自动适配。
- 子元素高度不确定时（比如多行文本、图片+文字组合），负 margin 方案会立刻失效
transform在 IE9+ 中支持良好，现代项目基本不用担心兼容性（除非还需要服务 IE8，那得准备 fallback）- 不过有一个容易被忽略的副作用：
transform会触发新的层叠上下文和包含块，可能影响z-index或overflow的表现
为什么单独使用 top: 50% 无法实现居中？
很多人以为 top: 50% 就能让元素居中，其实它只是把元素的上边缘移到父容器垂直方向的 50% 处，离真正居中还差一步——元素整体仍然吊在中心线上方，下半部分会超出边界。
- 必须再搭配
transform: translateY(-50%)（或完整写法translate(-50%, -50%)）才能真正实现居中 - 只写
top: 50%; left: 50%而不加transform，结果就是元素左上角对准了中心点，视觉上看起来严重偏右下 - 如果只关心垂直居中、水平方向不管，可以只写
top: 50%和transform: translateY(-50%)，省掉 left 相关的声明
父容器未设置 position 会有什么后果？
子元素使用 position: absolute 后，会向上查找最近的「定位上下文」（即 position 不为 static 的祖先）。如果整个页面都没有设置，它就会跑到 或视口那里，完全脱离预期容器——这恐怕是新手最容易踩的坑。
- 常见错误：忘记给父容器添加
position: relative - 如果父容器本身已经是
position: fixed或absolute，则无需额外设置 - 使用
position: sticky作为父容器时需要注意，滚动行为可能干扰居中效果
有没有不依赖 position 的替代方案？
当然有，而且适用场景不同。display: flex 和 display: grid 更加简洁，还能让元素不脱离文档流——这对后续布局的维护非常友好。
flex：父容器设display: flex; align-items: center;，适合单个子元素或弹性布局场景grid：父容器设display: grid; place-items: center;，语义清晰，但 IE 不支持place-items- 两者都不需要手动管理定位上下文，也避免了
transform带来的层叠上下文副作用 - 但如果父容器已有复杂布局（比如使用了 float 或 inline-block），强行改为 flex/grid 可能引发连锁样式重排，需要仔细权衡
说到底，写 CSS 本身并不费劲，真正烧脑的是做决策——要不要兼容 IE8？子元素宽高是否提前知道？父容器是否允许修改 display？但凡漏掉一条，调试时间直接翻倍。
