绝对定位垂直居中需 height 固定，否则因高度未渲染导致偏移；完整居中须加 left: 50% 与 transform: translate(-50%, -50%)；更稳方案是父容器用 flex + align-items/justify-content。
用 position: absolute + top: 50% + transform: translateY(-50%) 确实能垂直居中，但有个前提
这个组合只对「已知高度」的对话框可靠。如果对话框高度不固定（比如内容动态增减、字体大小响应式变化），transform: translateY(-50%) 会把元素往上挪它自身高度一半——而浏览器此时可能还没算出真实高度，导致定位偏移或闪动。
- 适用场景：
height固定（如height: 300px）或用max-height+overflow: auto封死高度 - 不适用场景：纯靠
min-height、fit-content或内部flex自适应撑高的容器 - 常见错误现象：首次打开时偏下，刷新后才居中；或在 Safari 中表现不稳定
transform: translate(-50%, -50%) 要配 left: 50% 才完整居中
只写 top: 50% 和 transform: translateY(-50%) 只解决垂直方向。水平方向必须同步处理，否则对话框会贴左上角。
.dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
-
left: 50%是关键，不是可选；漏掉就只剩垂直生效 -
translate(-50%, -50%)中两个百分比都指元素自身的宽高，不是父容器 - 如果父容器没设
position: relative，它会相对于初始包含块（通常是视口）定位，这点常被忽略
更稳的替代方案：用 display: flex + align-items / justify-content
当父容器可以加样式时，Flex 布局比绝对定位更鲁棒，尤其适合内容高度不确定的对话框。
.modal-overlay {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<p>.dialog {
/<em> 不需要 top/left/transform </em>/
width: 90%;
max-width: 500px;
}</p>
- 父容器必须有明确尺寸（如
height: 100vh或height: 100%），且不能是height: auto - 子元素无需设置宽高，flex 会自动居中，包括多行文本、图片等变高内容
- 兼容性够用：Chrome 21+、Firefox 20+、Safari 6.1+、Edge 12+
移动端要注意 viewport 和滚动穿透问题
用绝对定位居中时，如果页面本身可滚动，对话框可能随页面滚动而错位；用 flex 居中则更易控制。
- 确保
.modal-overlay的position: fixed，而不是absolute，避免滚动偏移 - 打开对话框时，建议给
加overflow: hidden，防止底层页面滚动 - iOS Safari 对
transform在 fixed 元素上的渲染有延迟，偶尔需强制触发重绘（例如加will-change: transform）
父容器是否设置了 position: relative、对话框高度是否可控、是否要兼容老版本 iOS —— 这三个点不确认清楚，光套 top: 50% + transform 很容易返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
