模态框居中

实现水平和垂直居中的模态框

实现方法

有多种方法实现模态框居中，这里介绍三种常用方法。

方法 1：Flexbox（推荐）

.modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

方法 2：Transform + Absolute

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法 3：JavaScript 动态计算

function centerModal(modal) {
  const modalWidth = modal.offsetWidth;
  const modalHeight = modal.offsetHeight;
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;

  const left = (windowWidth - modalWidth) / 2;
  const top = (windowHeight - modalHeight) / 2;

  modal.style.left = left + 'px';
  modal.style.top = top + 'px';
}

示例：居中模态框

点击按钮打开居中的模态框

模态框信息

窗口宽度: 0px
窗口高度: 0px
模态框宽度: 0px
居中方式: Flexbox

💡 推荐使用 Flexbox

Flexbox 是最简洁、最可靠的居中方法：
- 代码简单，易于理解
- 无需知道模态框的具体尺寸
- 完美响应式
- 浏览器兼容性好

总结

  • Flexbox 是最简单、最推荐的居中方法
  • Transform + Absolute 适合固定尺寸的模态框
  • JavaScript 方法适合动态计算的特殊场景
  • 使用 fixed 定位确保模态框始终相对于视口居中
  • 添加半透明遮罩层提升用户体验