如何在屏幕中居中模式？答案

【问题标题】：How to center modal in screen?如何在屏幕中居中模式？
【发布时间】：2021-10-01 11:25:16
【问题描述】：

当触发模式时，我有引导模式，它显示在页面顶部中心，即使向下滚动页面内容我也看不到模式对话框，因为它位于页面顶部，如何在屏幕上居中。

.modal{position:fixed;top:0;right:0;bottom:0;left:0;z- index:1050;display:none;overflow:hidden;outline:0}

【问题讨论】：

【解决方案1】：

我通常会显示一个带有网格的容器 div，并将我的 modal 放入其中：

.containerDiv {
    display: grid;
    width: 100vw;
    height: 100vh;
    place-items: center;
    background: transparent;

}

【讨论】：

【解决方案2】：

使用以下代码更新您的 HTML

.modal
 .modal-dialog.modal-dialog-centered

或者从模态元素中移除这个样式

{position:fixed;top:0;right:0;bottom:0;left:0;z- index:1050;display:none;overflow:hidden;outline:0}

并使用以下代码更新您的 CSS

.modal-dialog {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
  }

【讨论】：