54.上下中央に配置したい　～様々なテクニック～

上下中央に配置したい。

コーディングをしていると、中央揃えしたい場面に良く出くわします。

今回は上下中央配置するやり方を確認していきます。

上下中央？簡単でしょ？

ホントにそうでしょうか？

margin : 0 auto;やtext-align : centerは左右中央にはしてくれるものの

上下中央はしてくれません。

何故、上下中央が一筋縄ではいかないのか。

これはwidthとheightのデフォルト値と、その時の挙動に関係してるのかなと。

widthもheightもデフォルト値はautoです。

widthは取りうる最大の幅に広がります。

最大の幅の真ん中って、すごく簡単そうですよね。

heightはデフォルトでは取りうる最小値に狭まります。

取りうる最小値は「内容」の高さで決まります。

つまりpaddingやテキスト、子要素が無ければ高さは0になるのです。

この辺りが上下中央配置が簡単にいかない１つの要因かなと思います。

floatしたり、position設定すると子要素が親要素から抜けるので、

高さを失いますよね。

この辺りに注意しながら、進めていきましょう。

どうやって上下中央配置するの？

いくつか方法があるので、見ていきましょう。

テキストを上下中央にする方法と、ブロック要素を上下中央にする方法を分けて確認します。

テキストを上下中央に配置したい

paddingを指定

padding : 20px 0px;のように上下にpaddingを設定することで、

要素内のコンテンツを上下中央に配置できます。

例えば、

HTML

CSS

.test {
width: 300px;
height: 50px;
font-size: 16px;
line-height: 1;
padding: 17px 0;
}

こうするとテキストが上下中央揃えになります。

何故か？簡単な足し算引き算でわかります。

height : 50pxに対して

font-sizeが16pxでline-height : 1なので文字の高さは16px;

そしてpaddingが上下に17pxなので

17px + 16 px + 17px = 50px

50pxの高さに対して、上下に均等に余白が割り当てられているので中央に配置されます。

ただ、この方法は色々考慮する点が多いので、面倒ですね。

テキストの位置だけをカンプにあわせて微調整したいときにpadding値を触るぐらいの用途でしかない気がします。

line-heightとheightを同じにする

line-heightとheightを同じにすると、文字サイズがline-height内に収まっていれば、

テキストが上下中央になります。

ブラウザで表示されるテキストは、上下に均等にline-heightが割り振られるので当たり前といえば当たり前です。

注意したいのは、この方法が使えるのはテキストが1行の時だけです。

aタグで作るボタンなんかはこの方法でも良いかもしれません。

ブロックを上下中央に配置したい

flexboxを使う

最初は敬遠していたフレックスボックスも、今では心強い味方ですね。

単純にフレックスボックス(親要素)に対して

align-items : center;

とするだけでフレックスアイテム(子要素)0が上下中央になります。

超カンタン。

ただ、レイアウトによっては考えなければいけないです。

positionを使う

これはアイコンの配置とかで良くお世話になるやり方ですね。

親要素に高さとposition : relative;が必要な点に注意ですが、

.child {

　　position : absolute;

　　top : 50％;

　　left : 0px;

　　transform : translateY(-50%);

}

子要素に指定するだけで、上下中央配置してくれます。

今日のまとめ

上下中央は左右と違い一筋縄ではいかない
テキストとブロックでやり方がある
高さ0になってしまう問題は良く遭遇するので、注意する。

本日は上下中央にする方法について確認しました。

私はいまのところ上記４つの方法で、上下中央配置を行っています。

他にも素敵な実装があれば是非知りたいです。

では、また。

web制作のしおり

日々の学習をアウトプットします。