css - 为什么不证明内容 : center work in 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>