如何使自定义尺寸的Modal在浏览器缩放时始终居中？

问题描述 #

调整了一个Modal的尺寸后，浏览器缩放至80%时显示正常，但更改缩放比例后，Modal无法自动适配，出现偏移不居中的情况。当前使用的CSS代码如下：

.resizeModal {
    width: 99vw;
    right: 500px;
    position: relative;
}

解决方法 #

原代码中right: 500px是固定像素值，无法适配缩放后的视口，position: relative也不适合做全局居中定位。以下几种方案都能让Modal在浏览器缩放时自动保持居中：

方案1：Flex布局（推荐） #

通过给Modal的父容器设置Flex属性，实现自动居中：

/* Modal的父容器样式 */
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modal自身样式 */
.resizeModal {
  width: 99vw;
  /* 移除原有的right和position: relative */
}

方案2：绝对定位+transform #

利用绝对定位配合transform的百分比偏移，实现自适应居中：

.resizeModal {
  width: 99vw;
  position: fixed;
  left: 50%;
  top: 50%;
  /* 基于自身尺寸向左向上偏移50%，实现居中 */
  transform: translate(-50%, -50%);
  /* 移除原有的right: 500px和position: relative */
}

方案3：margin:auto（适合有固定宽高范围的场景） #

如果需要限制Modal的最大宽度，可通过margin: auto实现居中：

.resizeModal {
  width: 99vw;
  max-width: 1200px; /* 可选，防止Modal过宽 */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  /* 移除原有的right和position: relative */
}

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