Html 如何使用flexbox模型将div水平居中

我使用的是引导，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>

在IE中，我的盒子向右移动，在Chrome中成功居中

即：

铬

---

这是我的小提琴

请添加

flex-flow:column nowrap在IE中对齐中心


.modal flex{
显示：-webkit flex；
显示：-moz flex；
显示：-ms flexbox；
显示：-o-flex；
显示器：flex；
flex flow：列nowrap；/*添加此*/
证明内容：中心；
-ms内容：中心；
-ms-flex-pack:center；
对齐项目：居中；
}

为什么我和你有这么多问题？
我还发现了更简单的解决方案-排除
证明内容：中心样式规则。定位也开始起作用

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

这里更新了fiddle:
当使用框架时，它们有时会以一种方式组合属性，在本例中，当您添加新标准时，它们并不总是正常工作，尤其是Flexbox，这可能会给您带来非常不可预测的结果

在这种情况下，媒体查询会将自动边距设置为IE不喜欢的
模式对话框

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

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

是的，它可以工作。谢谢老实说——我又找到了一个解决方案——不要使用
justify content:center样式-它也开始正确定位。所以下一个解决方案也可以工作：
display:flex；对齐项目：居中。但无论如何，我会应用你的答案。谢谢。只需删除
justify content:center，它将不会在较小屏幕上水平居中对话框。不，它将居中。删除此样式
flex-flow:column nowrap从你的小提琴（使用css从答案只）。你的演示作品，因为你使用
flex-flow:column-nowrap，所以在IE中尝试不使用，然后调整大小，你会看到编辑后发生了什么，在IE中尝试小提琴，然后将宽度调整得很小，你会看到它没有水平居中。解决此类问题的正确方法是找到真正的原因，并解决它。任何其他伎俩迟早都会起到反作用。我真的建议你检查一下我的答案
@media (min-width: 768px) {
  .modal-dialog {
    margin: 0;
  }
}