证明内容：中心;使用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>
我的目标是,当我使用旋转(90度)或旋转(270度)变换时,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和按钮的高度和宽度始终相同,但可以自定义.
尽可能地,我不喜欢包裹元素.
解决方法
IE11需要父级具有flex-direction：列.
此示例将您的按钮旋转：
#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>
