最稳方案是display: flex+justify-content: center+align-items: center，父容器需设position: relative、height: 100vh（或min-height: 100dvh），按钮不脱离文档流且无额外定位。
遮罩层里按钮水平垂直居中用什么CSS最稳
直接上结论：用 display: flex + justify-content: center + align-items: center，父容器设为相对定位，按钮本身不需要额外定位。这是目前兼容性好、代码少、不易被其他样式干扰的方案。
- 别用
position: absolute配top: 50%+transform: translateY(-50%)—— 容易和遮罩层自身的overflow或scroll冲突，滚动时按钮可能偏移 - 别依赖
text-align: center单独水平居中 —— 对块级按钮无效，且无法解决垂直居中 - 如果遮罩层是全屏固定定位（
position: fixed），确保其height: 100vh和width: 100vw，否则 flex 居中会失效
按钮在遮罩层底部居中但不贴底怎么写
“底部居中”不等于“贴底”，常见需求其实是“离底边留空、水平居中”。这时候 flex 依然适用，但要在遮罩层内加一层包裹容器，或用 margin-top: auto 推下来。
- 推荐结构：
<div class="mask"><div class="btn-container"><button>确定</button></div></div> -
.btn-container设margin-top: auto，配合父级 flex 布局，按钮就会自动沉到底部区域中间 - 如果要留 24px 底边距，改用
padding-bottom: 24px在遮罩层上，再让按钮正常居中，更可控 - 避免对按钮本身设
margin-bottom—— 在不同屏幕高度下容易溢出或留白不一致
IE11 下 flex 不生效怎么办
IE11 对 flex 的支持有坑，特别是 align-items: center 在 min-height 容器里可能失效。得降级处理。
- 给遮罩层加
display: -ms-flexbox和对应旧版属性，比如-ms-flex-align: center - 更稳妥的做法：用
position: absolute+left: 50%+bottom: 24px+transform: translateX(-50%)，只针对 IE11 加这个规则 - 注意：IE11 不支持
vh在某些场景下的计算，建议遮罩层高度用height: 100%并确保父级有明确高度 - 别忘了给按钮设
position: relative—— 否则transform可能被父级overflow: hidden截断
按钮点击穿透遮罩层怎么防
遮罩层没挡住底层元素，点到下面去了，大概率是 pointer-events 或 z-index 搞错了。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层必须有
pointer-events: auto（默认值，但显式写上更安心），且不能是none - 确认遮罩层的
z-index确实比底层内容高，且没有被某个父级的transform或opacity创建新的层叠上下文导致失效 - 按钮本身不需要
z-index，但遮罩层和按钮应同属一个层叠上下文，否则按钮可能被遮罩层“盖住”而点不到 - 测试时临时加
background: rgba(0,0,0,0.5)看遮罩层是否真覆盖到位 —— 有时候透明度为 0 或背景没设，看着像没挡住
display 和 height 是不是你预期的值。 
