top:50% + transform: translateY(-50%) 能居中是因为top将元素上边缘移至父容器垂直中线，transform再向上移动自身高度的50%，且该50%基于自身高度，不依赖父高或子高；flex方案更稳但需父容器支持且有足够高度。
top:50% + transform: translateY(-50%) 为什么能居中
因为 top:50% 把元素上边缘移到父容器垂直中线，而 transform: translateY(-50%) 再把自身向上挪动**自身高度的一半**，最终视觉中心对齐。关键点在于：这个“50%”是相对于元素自身的高度，不是父容器——所以它不依赖父容器高度是否已知，也不需要知道子元素具体高多少。
常见错误现象：top:50%; margin-top:-100px 这种写法必须提前知道子元素高度，一旦内容动态变化（比如文字换行、图片加载后尺寸改变），立刻偏移失效。
flex布局比定位更稳，但要注意父容器 display 值
用 display: flex 配合 align-items: center 确实更直观可靠，但它要求父容器不能是 display: inline 或 display: table-cell 等不支持 flex 的类型；另外如果父容器本身是 position: absolute 或 position: fixed，flex 依然有效，但需确保它有明确的宽高或能被内容撑开。
- 若父容器高度由内容决定（比如
min-height: auto），flex 居中仍正常 - 若父容器高度为
0或未设置，flex 不会“凭空拉高”，居中就失效 -
transform: translateY(-50%)在父容器height: 0时反而可能意外显示（靠文档流位置+偏移）
transform 引发的层级和渲染问题
transform 会让浏览器为该元素创建独立的合成层（composite layer），这通常有利于动画性能，但也可能带来副作用：
立即学习“前端免费学习笔记（深入）”；
- z-index 行为变复杂：一旦元素有
transform，它就成为新的 stacking context，同级无 transform 元素可能被盖住，即使 z-index 数值更大 - 某些旧版 Safari（iOS 9–12）对
transform: translateY()渲染有抖动，加will-change: transform可缓解但非万能 - 如果元素内含
position: absolute子元素，它们的定位参考系仍是原位置，不受 transform 影响——这点常被误以为“子元素也跟着偏移了”
移动端 iOS Safari 中 input 聚焦时页面自动滚动的干扰
在 iOS Safari 中，当一个用 top:50%; transform: translateY(-50%) 居中的表单控件（如 <input>）获得焦点，系统可能强制将该元素滚动到可视区顶部，导致整个居中布局“跳一下”。这不是 CSS 错误，而是浏览器行为。
解决思路有限，推荐两个务实做法：
- 给父容器加
scroll-behavior: smooth并监听focus事件，用scrollIntoView({ block: 'center' })主动干预滚动位置 - 换用 flex 方案，并给父容器设固定高度（如
height: 100vh），避免 iOS 自动滚动逻辑触发
真正麻烦的不是怎么写居中，而是居中之后，元素还在不在预期的位置上响应交互——尤其当它被键盘顶起、被缩放影响、或嵌套在 scroll 容器里时。
