Unformed Building

Firefoxで使われている上下左右中央配置のスタイルシート

公開:
更新:

パーマリンク

Firefoxで画像を開いたら、背景が暗い感じのCSSが使われるようになってました。Firefox 12からですかね? 11 からでした。そのページでは画像が上下左右中央に配置されています。
ちょっと興味が湧いたので中身を覗いてみたら、上下左右中央配置もCSSで行っていました。

使われているCSSファイルはresource://gre/res/TopLevelImageDocument.cssにあります。
このファイルはMPL 1.1/GPL 2.0/LGPL 2.1のトリプルライセンスです。

@media not print {
  body {
    background-color: #222;
    margin: 0;
  }

  img {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

@media print {
  img {
    display: block;
  }
}

これのimgの部分ですね。この指定によって画像を上下中央に配置しています。
Visual formatting model detailsの10.3.7と10.6.4あたりがヒントかと思います。

ちょっと試したところ、他のブラウザの場合はIE 8以上なら同じように動くようです。
もちろんimgだけでなくdivなどにも応用できます。


@ksk1015さんが分かりやすいサンプルを作られていましたので、リンクしておきます。

要素の上下左右のセンタリング - jsdo.it - Share JavaScript, HTML5 and CSS


@o_tiさんが色々検証してくれました。

縦横中央配置のCSS | dskd