Why doesn’t it justify-content: the work of the center in IE?

Question

I have this simple div with a button inside it . justify-content: center; works fine with Firefox and Chrome, but doesn't work in 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 transform with rotate(90deg) or 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> 

height and width for div and button always the same, but customizable.

As much as possible, I prefer not to wrap the elements.

Answer 1

IE11 requires the parent to have flex-direction: column .

In this example, your button is 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>