「position:absolute」と「margin:auto」を使って、左右中央寄せはFlexBoxが定番になるまではよく使ってたんだけど、今でもたまに使います。
その時にabsoluteを指定している要素のdisplayプロパティで真ん中に表示されない現象がIE11で起こってたので、メモ。
<div class="Box"> <div class="inner"> 真ん中にしたい要素 </div> </div>
.Box{ position: relative; width: 500px; height: 500px; background-color: #ccc; } .inner{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: table; width: 200px; height: 200px; background-color: #000; }
displayプロパティを「display: table;」にしていると、何故かIE11では真ん中に表示されなかった。何かしらの解釈の違いなんだろうな。
この中央寄せをする時はdisplayプロパティには注意って事で。