如何居中反应引导模式？答案

【问题标题】：How to center react bootstrap modal?如何居中反应引导模式？
【发布时间】：2020-05-16 14:18:19
【问题描述】：

我正在使用 react boostrap 模态并尝试将其均匀居中放置，目前我正在指定模态的 width，然后将 modal-dialog 类上的 margin-left 设置为 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
  }
}

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

【问题讨论】：

标签： html css reactjs react-bootstrap

【解决方案1】：

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

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

.modal-dialog {
  margin: auto;
}

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

【讨论】：

这似乎不太正常，似乎出于某种原因将模态推向右侧！！
它确实有效！我无法保存您的代码笔。所以我不能给你看。您是否将其设置为普通 css 并删除所有其他 css？
是的，我做到了，似乎我的项目中设置了一个媒体查询，似乎把它搞砸了。但是，是的，代码似乎正在工作。顺便说一句，如果我想给一些顶部和底部的边距怎么办？
@TreeHuggerRick 是的，如果你这样做，它确实可以在 codepen 上工作，但其他媒体查询确实会搞砸。
太棒了。快捷方便。接受这个作为答案。谢谢你:)

【解决方案2】：

您可以在 Modal 中添加属性center。例如：

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

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

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

【讨论】：

这是正确的做法。 @Michelangelo 的方法不是反应式方法。为 Norayr 良好地使用 API +1。
我认为这是更好的方法。使用 CSS 而不是组件的属性是危险的 IMO。