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