el-dialog 默认仅水平居中、垂直贴顶，因 fixed 定位下 margin:auto 对垂直无效；需配合 top:50% 和 transform:translate(-50%,-50%) 或 flex+min-height:100vh 实现真正居中。
el-dialog 用 position: fixed 却不居中
Element UI 的 el-dialog 默认是 position: fixed，但它只设了 top: 0 和 margin: 0 auto，没配 transform 或 flex 居中逻辑。所以它只是水平居中、垂直贴顶——不是 bug，是设计如此。
常见错误现象：margin: auto 在 position: fixed 下对垂直方向完全无效；加了 top: 50% 但没配 transform: translate(-50%, -50%)，结果弹窗上边缘跑到视口一半位置，整体还是偏高。
- 确认你改的是
.el-dialog（内容区），不是.el-dialog__wrapper（遮罩层） -
::v-deep或/deep/必须存在，否则 scoped CSS 不生效 - 如果用了
append-to-body，定位上下文是body，此时top: 50%是相对于整个 viewport，没问题；但如果设了append-to指向某个滚动容器，top: 50%就变成相对该容器，容易偏移
父容器没高度，flex 居中失效
很多人试 display: flex; justify-content: center; align-items: center 却失败，根本原因是父容器（比如 body 或自定义 wrapper）没有渲染高度——height: 100% 会断链，min-height: 100vh 才可靠。
使用场景：你想彻底摆脱 transform、让弹窗随内容自适应高度，且支持响应式缩放。
- 给直接包裹
el-dialog的容器加min-height: 100vh，不是height: 100vh（后者在内容超长时会强制截断） - 确保该容器没设
overflow: hidden，否则弹窗可能被裁切 -
el-dialog自身不能有position: absolute/fixed，否则它就脱离 flex 流，align-items对它无效 - 若用 Vue 的
scoped，需用:deep(.el-dialog)覆盖默认定位
transform: translate(-50%, -50%) 失效的隐藏条件
这行代码本身没问题，但生效前提是「定位基准正确」。一旦父级有 transform、perspective 或 filter，就会创建新的 containing block，导致 top: 50% 不再相对于 viewport 计算。
性能影响：频繁触发 transform 不影响重排，但若父容器也在动画，可能引发复合层爆炸，尤其低端 Android 设备。
- 检查 Chrome DevTools 的 “Computed” 面板，看
top实际解析值是不是你预期的（比如50vh） - 避免在
.el-dialog__wrapper上额外加transform或filter: blur() - 如果弹窗内嵌了
iframe或第三方地图组件，它们可能偷偷创建 stacking context，干扰定位
响应式下弹窗被截断或偏移
居中后一缩放窗口，弹窗就跑出可视区，通常是因为 max-width/max-height 没设上限，或 padding 计算方式不一致。
容易踩的坑：用 calc(100vh - 40px) 时，40px 是硬编码，但 Element UI 的 .el-dialog__header 高度实际是 60px（含 border/padding），导致底部被切掉。
- 优先用
max-height: 90vh而非固定像素，留出系统 UI（如地址栏、状态栏）空间 -
.el-dialog__body必须设overflow-y: auto，否则内容撑高时整个弹窗溢出 - 移动端 Safari 对
vh解析异常（地址栏展开/收起时vh动态变化），可用 JS fallback：监听resize后重设style.maxHeight
真正卡住人的，往往不是哪行 CSS 写错了，而是你改的那层样式，被另一层更早声明的 !important 或更高优先级的选择器覆盖了——打开 DevTools，逐层点开 computed styles，看 top 和 transform 最终值是多少，比猜更有用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
