一年くらい前からtop/right/bottom/leftプロパティーを使った水平・垂直センタリングをよく使うようになった。margin: 0 autoによる水平センタリングと同じように、理解できればわかりやすい手法なので気に入っている。ただrelativeを組み合わせたものと違って、センタリングしたい要素が親要素を飛び出す大きさの場合、左上が揃うように配置されるのがちょっと気になる。センタリングしたい要素の中央と親要素の中央とを合わせたい。
Demo: Centering Overflowed Element
デモではとりあえず水平方向に飛び出すケースを考えている。見ればわかるようにセンタリングしたい要素が飛び出す場合、top/right/bottom/leftプロパティーを使った方法の場合は左が揃う。対してrelativeを使った方法の場合はセンタリングしたい要素の中央と親要素の中央が揃うような配置になる(別の言い方をすれば左右が見切れる)。relativeを使った方法だと必要になるラッパー要素は、@terkelが考えてくれたtranslateを使った方法だと必要なくなる。top/right/bottom/leftプロパティーを使った方法にこだわらないのならtranslateを使った方法が良さそう。
画像の場合はこのように飛び出すようなケースを想定するとmax-width/max-heightプロパティーを使って縮小させたりすることが多い。それでもアスペクト比を維持するのが難しかったりするため、背景画像にしてしまうと楽(今はbackground-size: coverがある)で、よくそれで逃げるけど、文字の場合はそうもいかない(SVGにするという方法もなくはないけど微妙)。
しばらくは飛び出すケースと飛び出さないケースで二つの方法を使い分ける必要がありそう。