上下左右のセンタリングには様々な手法が編み出されてきた。最近はCSS Transformを使う方法がメジャーになりつつある。コンテナーとセンタリングしたい要素のサイズが共に不明でもうまくいくところなど、そこそこ万能感があるのがポイントだろうか。このCSS Transformによるセンタリングは左下に動かしてから右上に戻すパターンと、その逆の右上に動かしてから左下に動かすパターンがある。どちらでも理論的には上手くいくが、ベスト・プラクティスとなりうるのは後者だけだろう。
Demo: Centering Unknown with CSS Transform (top/left)
このデモは実際に不具合が起こりうるパターンになっている。センタリングする要素をtopとleftプロパティーで動かした後、transform: translate(-50%, -50%)で元に戻しているわけだが、Internet Explorer 11では横スクロールバーが出る原因となる。どうやらleftとtopプロパティーで動かした時点で横スクロールバーの有無が確定してしまうようだ。コンテナー側でoverflowプロパティーを使えばアドホックに対処することは可能ではあるが、副作用を伴うのでやらない方が良いだろう。
Demo: Centering Unknown with CSS Transform (right/bottom)
対してrightとbottomプロパティーで動かした後、transform: translate(50%, 50%)するパターンでは横スクロールバーが出ることはない。描画領域が拡大しない方向へ動かしているからだ。こちらのパターンには特にデメリットもなく、topとleftプロパティーのパターンと比べても極端にコード量が増えるわけでもない(2文字増えるだけだ)。
CSS Transformによるセンタリングの説明では多くの場合、前者のtopとleftプロパティーを使ったパターンが使われている。その解説は間違っているわけではないが、Internet Explorer 11の挙動を考慮するとrightとbottomプロパティーを使ったパターンが安定していると言え、ベスト・プラクティス足りえる。
僕はこのCSS Transformによるセンタリングには欠点があると感じていて、あまり多用はしないようにしている。その欠点とは動かした要素がブラーがかかったようにぼやけることがあることだ。以前からWindowsのChromeでは多発する。文字はぼやけないのでわかりづらい(気づきづらい)が、幾何学的なシャープな画像を動かしてみたりすると気づきやすい。再現条件がよくわからないのでサンプルもうまく作れない。
ともあれ上下左右の中央寄せには選択肢は多くないので、結局は使わざるを得ない。positionプロパティーでもbackground-positionプロパティーのような配置ができれば良いのになとたまに思う。