CSS 为什么 justify-content: center 在 IE 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29270465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't justify-content: center work in IE?
提问by KaeL
I have this simple div with a button inside of it. justify-content: center;works fine using Firefox and Chrome, but does not work on IE 11:
我有一个简单的 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>My goal is that, when I use transformwith rotate(90deg)or rotate(270deg), the button will fit into the div:
我的目标是，当我使用transformwithrotate(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>The heightand widthof the divand buttonare always the same, but are customizable.
该height和width的div和button始终是相同的，但是是可定制的。
As much as possible, I prefer not wrapping elements.
尽可能地，我更喜欢不包装元素。
回答by misterManSam
IE11 needs the parent to have flex-direction: column.
IE11 需要父级拥有flex-direction: column.
This example has your button rotated:
这个例子有你的按钮旋转：
#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>回答by Rafalfaro
In my case I had to make the flex container's height 100%. justify-content worked without a problem after that.
就我而言，我必须将 flex 容器的高度设为 100%。之后 justify-content 工作没有问题。
I also had to make the (first level) children's max-width 100% to fix some content overflowing horizontally.
我还必须使（第一级）儿童的最大宽度为 100% 以修复一些水平溢出的内容。
