WEB系キャンパス

【表示バグ】IE11でpositionの中央配置時のバグ

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です