[css] サイズ可変elementの中央表示方法

WEBページのデザインコーディングをする際に、サイズが固定化されていない要素を中央表示したい場合があります。 上位も含めて全てがinlineの要素であれば、親要素に「text-align:center;」とセットをするだけでいいのですが、 position:absolute;の要素の場合は、どの様にセットすればいいのでしょうか？ 簡単なようで、意外と手こずった為、簡単な解決方法を記載しておきます。

inline要素のセンタリング

エレメントのセンタリングは何通りかのやり方があります。 例えば、文字だけの中央表示は、以下のようにします。

See the Pen absolute-centering-1 by YugetaKoji (@geta1972) on CodePen.

「text-align」と「line-height」を使って簡易的に行なえますが、このやり方は、内包する文字列が1行であればいいのですが、2行以上になるとline-heightが邪魔をして破綻してしまいます。 次にサイズが固定してある、inline要素の場合は、ほぼ同じCSSコードで対応できます。

See the Pen absolute-centering-2 by YugetaKoji (@geta1972) on CodePen.

これもinline要素が1つの場合であればいいのですが、横幅を超えるサイズや個数があると破綻してしまいます。

position:absoluteのセンタリング

一番やっかいなのが、position:absolute;の絶対座標で中央表示にしたい場合です。   普通になんにも考えずに記述すると、topとleftを100%にするといいかと考えがちですが、要素のサイズ分、ずれ込んでしまいます。 サンプルは、分かりやすく少し大きめの要素でセットしてみました。

See the Pen absolute-centering-3 by YugetaKoji (@geta1972) on CodePen.

これを解消するには、transfotrm指定でサイズの50%分を逆にスライドするという方法で縦も横もセンタリングすることが可能になります。

See the Pen absolute-centering-4 by YugetaKoji (@geta1972) on CodePen.

calcを使って、計算してもいいのですが、センタリングは50%の記述だけでできるので、これで行なうのが正解でしょうね。