CSS模态框滚动页面后显示偏移出浏览器窗口该如何解决

position: absolute是相对于最近的非静态定位祖先元素定位，top: 50%的计算基准是参考元素的总高度，而非当前屏幕可视区域高度。页面向下滚动后，文档流整体上移，计算出的居中位置自然会偏移到可视区域之外。

将定位属性替换为fixed即可，fixed定位始终以浏览器可视视口为定位基准，不受页面滚动影响：

.modal {  
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999; /* 保证模态框层级高于页面其他元素 */
}

• 模态框展示时给body添加overflow: hidden样式，可禁止背景页面滚动，关闭模态框时移除该样式即可
• 如果模态框内容高度超过屏幕高度，可额外添加max-height: 90vh; overflow-y: auto;样式，避免内容超出屏幕无法查看

内容的提问来源于stack exchange，提问作者Peter