为什么不证明内容合理：中心在IE中起作用？

Z时代
2024-01-10
分类：问答

我有一个简单的div，里面有一个按钮。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)，该按钮将适合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>

该height和width的div和button始终是相同的，但是是可定制的。

我尽可能不包装元素。

回答：

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>