为什么 justify-content: center 在 IE 中不起作用？

Question

I have this simple div with a button inside of it。 justify-content: center; 在 Firefox 和 Chrome 上工作正常，但在 IE 11 上不工作：

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
}

<div id="div">
  <button id="button">HELLO</button>
</div>

我的目标是，当我将 transform 与 rotate(90deg) 或 rotate(270deg) 一起使用时，the button will fit into the div：

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}

<div id="div">
  <button id="button">HELLO</button>
</div>

div和button的height和width总是一样的，但是可以自定义。

我尽量不要包装元素。

Answer 1

IE11 需要父级有 flex-direction: column.

此示例旋转了您的按钮：

#div {
  height: 200px;
  width: 50px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}
#button {
  height: 50px;
  width: 200px;
  min-width: 200px;
  border: 1px solid black;
  background-color: red;
  transform: rotate(90deg);
}

<div id="div">
  <button id="button">HELLO</button>
</div>

Answer 2

在我的例子中，我必须将 flex 容器的高度设置为 100%。 justify-content 之后就没有问题了。

我还必须将（第一级）儿童的最大宽度设置为 100% 以修复一些水平溢出的内容。

为什么 justify-content: center 在 IE 中不起作用？

Why doesn't justify-content: center work in IE?

css

flexbox

internet-explorer-11