CSS: 要素を天地左右の中央に配置したい(条件あり)

目次

---

条件

1. .outerは縦横比を維持しつつ可変に。
2. .innerの幅・高さは固定。
3. 対応ブラウザはIE9以上。できればIE8も含めたい。

<div class="outer">
  <div class="inner">
    inner<br>text
  </div>
</div>

以上の条件で、下記で紹介されている5つの方策をそれぞれ試してみました。

• 参考: まだ中央寄せで消耗してるの？ - @yoshiko_pg

補足 縦横比を維持した可変の設定

下記のように、縦横比を維持するために高さをheightではなくpadding-topで指定しています。

.outer {
  width: 100%;
  padding-top: 40%;
}

なお、.outerの幅が画面幅と完全に同じならば、vwの単位で指定できます。
しかし、vwの対応はIE9以上なので、今回はこれは次善の策とします。

• 参考: Can I use...

.outer {
  width: 100%;
  height: 300px; /* IE8用 */
  height: 40vw;
}

---

デモと結果

デモ	結果
negative margin	OK
transform	OK ただしIE9以上。 (Can I use...)
offsets + auto	OK
table-cell	高さはpadding-topではダメ。 また、要素をひとつ余分に用意しなければならない。
flex	高さはpadding-topではダメ。 IE10以上。 (Can I use...)

🔗 ソースコード (GitHub)

---

結論

今回のような条件なら、よく知られた方法である「ネガティブマージン」や「上下左右座標ゼロ&自動マージン」が良さそうです。
今回、中央配置するにも色々な方法があるんだと勉強になりましたが、理念・理想に縛られず、現時点での最善を選ぶことの大切さも学びました。