如何使 ngx-bootstrap 模态居中

尝试使用这样的 CSS 将这个 ngx-boostrap 模式居中，但它不起作用：

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

但是在开发工具中，我可以像这样添加 CSS：

 .modal.dialog{
  top: 50%
}

所以至少它是垂直居中的，但这是在开发工具中，并且 html模板中没有 .modal.dialog 类

有没有办法将 ngx-bootstrap 模式正确居中？

我想创建一个通用模式组件以在任何地方使用它，方法是提供输入消息并添加是/否对话框并输出用户选择（使用 EventEmitter）

我在以下 Plunker 中找到了一个示例，但无法在单独的自定义组件中重现它。

plunker 示例来自这个网站： https ://github.com/valor-software/ngx-bootstrap/issues/2334

更新：

在@Wira Xie 回答之后，当我使用静态模式和这个 CSS 时：

 .modal-sm
{
  top: 50%;
  left: 50%;
  width:30em;
  height:18em;
  background-color: rgba(0,0,0,0.5);
}

模态显示居中，但只有 Esc key 可以隐藏它，所以当我在模态外部单击时，它仍然可见。

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

阅读 750

有点晚了，仅供参考。

组件中对话框的样式不起作用的原因是组件样式被隔离并限制在组件内的元素中。通过 bsmodalservice 创建的对话框在该组件之外。（直接在 <body> 下）。

因此，虽然您的样式被封装在组件和一些随机标识符中，但对话框本身却不是。最终的 css（如 mycomponent[_ngcontent_bla_323] .modal ）不适用于服务添加的 div.modal。

可能的解决方案是：

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