読者です 読者をやめる 読者になる 読者になる

すたらブログ

文系Webプログラマの備忘録

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

目次


条件

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

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

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

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

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

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

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

.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...)

結論

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