Flex实现遮罩层文字水平垂直居中需父容器设display: flex、justify-content: center、align-items: center及明确高度（如height: 100vh），缺一不可；仅justify-content: center只能水平居中，垂直方向无效。
遮罩层里文字水平垂直居中用 Flex 最稳
现代浏览器下，display: flex + justify-content: center + align-items: center 是唯一不依赖尺寸、不担心换行、不卡死响应式的方案。父容器（遮罩层）必须有明确高度（比如 height: 100vh），否则 align-items: center 无效。
常见错误是只写 justify-content: center，结果文字只水平居中、垂直方向贴顶；或者给文字加 margin: auto，但在非 flex 容器里根本不起作用。
- 遮罩层本身要设
position: fixed或position: absolute，并覆盖全屏：top: 0; left: 0; width: 100vw; height: 100vh; - 文字容器（比如
<div class="modal-content">）直接加三行 flex 居中样式，别套多余 wrapper - 如果文字内容可能多行，确保
white-space: normal（默认值），避免被white-space: nowrap截断
IE11 或老项目必须用绝对定位 + transform
Flex 在 IE11 下对 align-items 有渲染 bug，尤其当子元素含 inline-block 或字体缩放时。这时得退回 position: absolute + transform: translate(-50%, -50%) 组合。
关键点不是“写了 top: 50% 就算居中”，而是漏掉 transform 会导致文字上边缘落在屏幕正中——实际偏移了自身高度一半，完全没居中。
立即学习“前端免费学习笔记（深入）”；
- 父遮罩层需
position: relative或position: fixed - 文字元素设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 不要给文字元素设固定宽高，flex 方案里它能自适应，这里也一样——宽度由内容撑开，高度由行高决定
文字遮罩层透明背景别用 opacity
用 opacity: 0.7 会让整个文字变淡，包括颜色和边框；正确做法是用 background: rgba(0, 0, 0, 0.6) 控制背景透明度，文字保持 100% 清晰度。
遮罩层本身（外层 <div id="overlay">）可以用 background-color: rgba(0, 0, 0, 0.5)，但里面文字容器的背景必须单独设，否则会叠加导致过暗。
- 文字颜色优先选纯白
color: white，对比度足够应对多数图片背景 - 字号建议用
font-size: 1rem或1.2rem，太小在移动端看不清，太大容易溢出 - 加一点内边距
padding: 1rem，避免文字紧贴遮罩边缘
移动端点击区域小导致点不中文字
遮罩层常被误设为 pointer-events: none 或未设 z-index，结果用户点半天没反应。文字本身不是可点击目标，真正响应点击的是包裹它的容器或遮罩层本身。
如果遮罩层里只有文字、没有按钮，又想支持点击关闭，就得给文字容器加 cursor: pointer 和显式事件监听，不能依赖默认行为。
- 遮罩层
z-index至少设为999，确保压在所有内容之上 - 文字容器若需点击响应，必须设
pointer-events: auto（父层可能继承了none） - 移动端 Safari 对
click有 300ms 延迟，关键交互建议改用touchstart
transform: translate() 就不可跳过——而且必须写全两个参数，少一个就偏移。 
