カラーモード

画像サイズに依存しない絶対中央配置

CSS

ウェブページ作ってると画像を画面の中央に配置したいし、どんなサイズの画像が来ても真ん中にしたいし、どんなサイズの画面で見ても画像をはみ出させずに表示させたい欲求はよく出てくる。これってもはや人類の欲望と言っても過言ではない。

要件

この人類の欲望をを CSS で書くと、こう。

<body>
  <img src="image.jpg" />
</body>

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

前のエントリで書いたスニペット（Firefox で画像を直接見る時の UA スタイル）に、max-width: 100%; と max-height: 100%; を加えただけ。デモで欲望を満たせる。

わかりにくいので別ウィンドウで見た方がいい。

対応ブラウザは IE8, Chrome 26, Firefox 20, Opera 12.14。

IE8 以上でも縦方向も中央配置するなら display: table; でいけるんじゃないかと思うところけど、３つめの要件「ウィンドウサイズが画像サイズより小さくなっても画像がはみ出ない」が完全には満たせない。タイトルで「画像サイズに依存しない絶対中央配置」なんて言っておいて、それ以上のことも要求する。人類の欲望は果てしないのだ。

html {
  display: table;
  width: 100%;
  height: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

img {
  max-width: 100%;
  max-height: 100%;
}

こちらもわかりにくいので別ウィンドウで見た方がいい（2）。

ブラウザで Result フレームのサイズを変えて見て欲しい。高さを小さくすると画像がはみ出てしまう。なお Chrome 26 だと display: table;でも横方向の縮小表示がほんの少しだけ効く。ウィンドウはそんなに小さくしないのが常識人だけど、画像がとても大きい場合は画像サイズ＞画面サイズになるシチュエーションもありえなくない、ということで。

ただし、親要素に absolute: relative; を指定できないとか、子要素に img 以外に兄弟要素がある場合はこのスニペットは向かないので、あとは JS でがんばろう。