如何使用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已成功居中。

IE：

铬

这是我的小提琴https://jsfiddle.net/vadimb/mj6ygckq/3/

Answer 1

当使用 frameworks 时，他们有时会以一种在您（在这种情况下）添加新标准，特别是Flexbox时无法始终正常工作的方式组合属性，这会给您带来非常不可预测的结果

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

假设您要使用弹性行方向，并将对话框水平和垂直对齐，请添加此CSS规则

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

Updated fiddle

Answer 2

请添加flex-flow:column nowrap;以在IE中对齐中心。

.modal-flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow:column nowrap; /*Add this */
  justify-content: center;
  -ms-justify-content: center;
  -ms-flex-pack: center;
  align-items: center;
}

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

Answer 3

我发现更简单的解决方案 - 排除justify-content: center;样式规则。并且定位也开始起作用了

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

这是更新的小提琴：https://jsfiddle.net/mj6ygckq/8/