html - 如何使用 flexbox 模型水平居中 div

Question

我正在使用 Bootstrap 并且在 IE 中将框居中时遇到问题。 Chrome 按预期运行。

这是我的标记:

<div class="modal modal-flex" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      IE, why I have so much problems with you?
    </div>
  </div>
</div>

我的 modal-flex 类很简单(我删除了供应商特定的样式以简化示例):

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

在 IE 中我的框向右移动，在 Chrome 中成功居中。

即:

Chrome

这是我的 fiddle https://jsfiddle.net/vadimb/mj6ygckq/3/

Answer 1

当您使用框架时，它们有时会以一种并不总是正常工作的方式组合属性，在这种情况下，您添加了一个新标准，尤其是 Flexbox，这会给您带来非常不可预测的结果.

在这种情况下，媒体查询将自动边距设置为 modal-dialog，这是 IE 不喜欢的。

假设您想使用 flex 行方向，并水平和垂直对齐对话框，添加此 CSS 规则

@media (min-width: 768px) {
  .modal-dialog {
    margin: 0;
  }
}

Updated fiddle