絶対中央配置のCSSの続き

前記事デモのおまけ1で、サイズ指定をしないインライン要素の絶対中央配置で、四辺の値を%指定にすると、ブラウザによって縦方向の位置取りが違うことに気づいたので、せっかくなのでもうちょっと検証してみた。

インライン要素の絶対中央配置

<div class="wrap2">
  <span class="target2">インライン要素</span>
</div>
.wrap2 {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.target2 {
  margin: -25%;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 50%;
}

span.target2はサイズが固定されていないインライン要素だ。インライン要素でもposition:absolute; top:0; bottom:0; left:0; right 0; margin:auto;を指定すると、親要素いっぱいに要素が拡張されてビタビタになるのは前回のデモの通り。で、四辺からの距離を50%とし、その半分の値(25%)を ネガティブマージンで指定すると、たぶん中央になるんじゃないの、と思ってやったのが前回デモのおまけ1の上記スニペット。

ブラウザ別のスクリーンショット

Chromeで幅狭い時

Chromeで幅広い時

Google Chromeでは縦方向の位置取りはイメージ通りになっています。.wrap2の上辺と下辺からの距離とspan.target2の高さが 25%-50%-25%になっている。

ところが、Chrome以外のブラウザだと幅が広い時に上下方向の位置取りがおかしくなる。

Firefoxで幅狭い時

Firefoxで幅広い時

Operaで幅狭い時

Operaで幅広い時

IE9で幅狭い時

IE9で幅広い時

見ての通り、Firefox, Opera, IE9ではブラウザの表示幅が広いと上下方向にもボックスが拡張してしまう。幅が狭い状態から少しずつウィンドウを広げていくと、span.target2は正方形を保って拡縮されるのがわかる。この正方形のレンダリングは何に由来しているだろう?(対応ブラウザでのみ確認)

よくわかんないんですけど

個人的にはChromeのレンダリングが自然だと感じる。Chrome以外が同じ表示なので、どっちが仕様にそっているのかよくわからない。とりあえずはサイズを明示しないならインライン要素をこの方法で絶対中央配置にするのはやめたほうがよさそうだ。そもそもインライン要素を絶対中央配置したいニーズがあるのか疑問ではある。