absolute + margin: auto 居中需同时满足四边为0、宽高明确、父容器为定位上下文；遮罩场景易因裁剪、滚动偏移、视口变化失效，推荐 fixed + flex 替代。
用 position: absolute 配 margin: auto 实现居中，只在特定条件下可靠——它依赖父容器明确宽高且为定位上下文，现代项目中容易出偏移、不响应滚动或被裁剪，不推荐作为加载遮罩的首选方案。
为什么 absolute + margin: auto 在遮罩场景下容易失效
这个组合看似简洁，但实际对 DOM 结构和样式约束极强：父容器必须是 position: relative 或更高级定位（如 fixed），且需显式设 width 和 height；否则 margin: auto 对块级元素的居中行为不会触发。
- 遮罩层若挂载在
overflow: hidden的祖先下，absolute会被裁剪，哪怕设了top: 0; left: 0; width: 100%; height: 100% - 页面滚动时，
absolute相对于最近定位祖先，不是视口，遮罩会“粘”在局部区域不动 - 移动端软键盘弹出后，某些 WebView 会重算视口尺寸，
100%宽高可能塌缩，导致遮罩漏边或错位
absolute 居中文字的正确写法（仅限可控小范围）
如果确定父容器是 position: fixed、无 transform/filter、且宽高固定（比如一个已知尺寸弹窗），可用以下结构：
.mask {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5);
}
.mask-content {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
width: 200px;
height: 60px;
}
- 必须同时设
top/left/right/bottom四值，才能激活margin: auto的居中逻辑 -
width和height必须为具体值（不能是fit-content或百分比），否则居中失败 - 内部文字用
text-align: center+line-height垂直居中，仅适用于单行、固定高度场景
与 fixed + flex 方案的关键差异
对比主流推荐的 position: fixed + display: flex，absolute + margin: auto 缺少弹性容错能力：
-
flex不依赖子元素宽高，图标/文字尺寸变化时自动重排；margin: auto一旦宽高估算偏差，就偏移 -
flex天然支持多行文字换行、响应式缩放；line-height居中在字体缩放或 DPR 变化时易出现 1px 错位 -
flex容器可设min-height: 100dvh兼容 iOS 键盘弹出；absolute的100%高度无法响应动态视口单位
真正要动用 absolute + margin: auto，通常只出现在嵌入式小模块、已有 legacy 弹窗框架里，或者父容器本身不允许使用 flex（比如某些老版 IE 兼容兜底）。日常开发中，优先走 fixed + flex 路线，把复杂度留给浏览器布局引擎，而不是手动算 margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
