【CSS】要素を上下中央に揃える方法

プログラミング

要素を上下左右の中央に置くやり方って、いつも迷うんだよね。

そのつどググってるんだけど、なかなか覚えられなくて。。

 

 

要素を中央に揃えるとき、いつも左右の中央とか上下の中央とかがわからず、そのつどググったり過去のメモを見たりしています。

プログラミング初心者の方に多いと思われる、この中央寄せ問題。

いつかきちんと整理しようと思ったので、自分なりにまとめてみました。

 

左右の中央寄せ text-align: center;

テキストや画像といったインライン要素に対しては、text-align: center; を指定します。

例えば、pタグで囲われたテキストを要素の真ん中に置きたい場合、text-align:center; で中央に配置されます。

See the Pen
text-align: center;
by bat (@bat20190608)
on CodePen.

 

ただし、「親要素の中の子要素」を中央にしたい場合は、これだけでは不十分です。テキストが子要素の中央にいるだけで、子要素自体は左づめになってしまいます。

そういう時や、また複数の子要素を親要素の中央に配置したい場合は、子要素に display: inline-block; を指定すればできます。

See the Pen
text-align:center; と display:inline-block;の併用
by bat (@bat20190608)
on CodePen.

 

左右の中央寄せ margin: 0 auto;

要素を中央寄せにしたいときに使う定番です。

ポイントはwidthの指定が必要です。

指定したサイズの子要素が、親要素の左右中央に配置されます。

See the Pen
margin: 0 auto;
by bat (@bat20190608)
on CodePen.

 

上下左右の中央寄せ display: flex;

もしかすると、今一番多いパターンはこれかもしれません。

display: flex;  (←横並びにする)

justify-content: space-between;  (←左右の均等割)

align-items: center;  (←上下の中央寄せ)

 

display: flex; を使ったこのパターンは、個人的には常に使っているパターンで、これを覚えていれば基本的に困ることがないです。

See the Pen
上下左右中央 display: flex;
by bat (@bat20190608)
on CodePen.

 

上下左右の中央寄せ position: absolute;

position: absolute; を使ったパターンは、学習初期によく目にしました。

これも結構目にしますね。

position: absolute;

top: 50%;

left: 50%; (←topとleftを50%にすると、要素の左上がちょうど真ん中になる)

transform: translate(-50%, -50%); / (←上下とも要素の半分を戻す) 

 

これはちょっと複雑な作り方なので、理解するのにかなり時間がかかりました。

See the Pen
上下左右中央 postion absolute
by bat (@bat20190608)
on CodePen.

 

こちらについては、とてもわかりやすく図解されているサイトがあるので、紹介させていただきます。

参考画像: http://www.terasol.co.jp/web/4028

 

「学習初期にこのサイトに出会えていれば、こんなに不毛な時間を過ごさなくても良かったのに」と、悔しい思いをしました。

その他の中央寄せの方法も紹介しているので、すごくおすすめのサイトです。

 

以上、いつくかのパターンをご紹介しました。

これをまとめている私自身が一番勉強になった気がします(笑)。

他にもいろいろな方法があるのでしょうが、これだけパターンを把握していれば十分かと。

初学者に少しでも役に立つ情報であれば嬉しいです。

 

 

 

 

 

 

 

 

タイトルとURLをコピーしました