CSS で中央寄せマスターに、おれは、なる!

CSS だけで可変サイズの要素を、縦方向 (=上下方向) 、および横方向 (=左右方向) で中央寄せできます。基本はたったの 3行です。中央寄せの方法で悩んだときにお役立てください。

中央寄せの基本は 3行

Vertical align anything with just 3 lines of CSS で紹介されているように
縦方向の中央寄せは以下のような 3行の CSS で実現できます。

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

簡単な説明

最初の 2行

最初の 2行では、
中央寄せしたい子要素の縦方向の開始位置を
親要素の中央に移動させます。


    position: relative;
    top: 50%;

 

最後の 1行

最後の 1行で行き過ぎた分、すなわち
子要素の高さの半分を引き戻します。


    transform: translateY(-50%);

 

横方向も同様に

以下のように横方向にも同様の指定を行うことで
縦横ともに中央寄せとなります。


.element {
    position: relative;
    top: 50%; left:50%;
    transform: translateY(-50%) translateX(-50%);
}

 

転ばぬ先の杖

iOS で動かない?!

これだけでは iOS (iPhone や iPad) だとうまく機能しないはずです。
iOS ではベンダプレフィックスを付記する必要があります。
IE と Mobile Safari のために 2行追記します。


.element {
    position: relative;
    top: 50%; left:50%;
    transform: translateY(-50%) translateX(-50%);
    <span style="font-weight:900;">-webkit-</span>transform: translateY(-50%) translateX(-50%);
    <span style="font-weight:900;">-ms-</span>transform: translateY(-50%) translateX(-50%);
}

ベンダプレフィックスを付記するのは transform の方だけです。
translate (translateY、translateX) に付けてはいけません。
もし誤って付記すると中央寄せが機能しなくなります。

インライン要素だと機能しない?!

span要素などのインライン要素では以下のように
意図とは異なる表示になると思います。

インライン要素
意図通りに機能する?

 
そのような場合には以下のように
「display:inline-block;」
を追記します。

.element {
    position: relative;
    top: 50%; left:50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-;transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    <span style="font-weight:900;">display:inline-block;</span">
}

すると、以下のような意図通りの表示が得られると思います。

インライン要素
意図通りに機能する?

 
なぜ span要素では上手く行かないのでしょうか。
それは CSS の勧告を読むと理解できます。

以下の図は勧告から抜粋したものです。
span要素などの非置換インライン要素
(non-replaced inline elements) には
幅が存在しません

vertical_center

もちろん、目に見える以上は適当な面積があります。
見た目には、幅も高さもあります。

しかし、そこは問題ではありません。
CSS ではインライン要素に幅はないということが最重要です。
視覚に惑わされて、幅があると考えてはいけません。

さて、CSS の中で幅がないとされている以上、
要素の大きさを決めるために幅を指定したり、
位置を計算するために幅を使えないことは明らかです。

以下の部分は、要素自身の幅と高さに基づいて計算されます。
しかし、幅と高さはないと決められているため、
そのような計算はできません。
この部分は無効となります。

    transform: translateY(-50%) translateX(-50%);
    -webkit-;transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);

非置換インライン要素 (non-replaced inline elements)
には幅と高さがありませんが、
置換インライン要素 (replaced inline elements)
には幅と高さがあります。

そこで、同様の振る舞いをしつつも
幅と高さを扱えるように
「display:inline-block;」
を追記して
置換インライン要素とすることで
意図通りの中央寄せが得られます。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*