「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プロパティには注意って事で。