如何居中反应引导模式？

Question

我正在使用 react boostrap 模态并尝试将它均匀地居中定位，目前我正在指定模态的 width ，然后将 modal-dialog 类的边距设置为 285px !important 这似乎有效。但是当屏幕尺寸低于 xl 尺寸时，我该如何做到这一点，边距应该是 100px 。

这是 codepen 的链接。

我的 CSS 看起来像这样：-

  .modal-content {
   width: 1200px
   }
 .modal-dialog {
   margin-left: 285px !important
   }
  @media screen and (max-width: 1000px) {
 .modal-dialog {
    margin-left: 100px !important
  }
}

显然，媒体查询似乎不起作用。或者有没有办法将模式设置 为无论屏幕大小始终居中？

原文由 TreeHuggerRick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你使用 flex，那是小菜一碟：

 div.fade.in.modal {
  display:flex !important;
}

.modal-dialog {
  margin: auto;
}

这将始终将其垂直和水平居中。

原文由 Michelangelo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以只在模态中添加属性 center 。例如：

 <Modal
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
......
</Modal>

另外，您可以阅读文档 https://react-bootstrap.github.io/components/modal/#modal-vertically-centered

希望我的回答对您有所帮助。

原文由 Norayr Baghdasarov 发布，翻译遵循 CC BY-SA 4.0 许可协议