【CSS】初心者必見!CSSで要素を中央揃えにする簡単な方法!

2019.08.16

CATEGORY : WEB

こんにちは缶コーラです。

今回はcss初級者なら誰もが一度は検索する内容。
【css 中央寄せ】
について解説していきたいと思います。左右の中央寄せならわかるけど上下の中央寄せはちょっと・・・。という方多いと思いますので、そんな方にぴったりな内容だと思いますよ~。

この記事の目次

左右中央寄せ

それではやっていきましょう。
まずは左右の中央寄せです。インライン要素ブロック要素では中央寄せの方法が違いますので注意しましょう。

インライン要素の左右中央寄せ

インライン要素の左右中央寄せは中央寄せにしたいインライン要素を囲んでいる親要素、divpliなどのブロック要素に対してtext-align:centerを指定するだけです。

HTML

CSS

文章を中央に寄せたい場合は、その文章が含まれているブロック要素、もしくはその親のブロック要素に対して中央寄せの記述text-align:centerをしてあげることで中のインライン要素を中央寄せにすることができます。

pタグに関してもブロック要素ですのでtext-align:centerを指定すると中央寄せにできます。
ですのでWebサイト全体を中央寄せにしたい場合は、bodyタグに対してtext-align:centerをすることでサイト全体が中央寄せになります。

ブロック要素の左右中央寄せ

先ほどはtext-align:centerを使って中にあるインライン要素を中央寄せにしました。次はブロック要素自体を中央寄せにしてみたいと思います。ここを理解することによって「text-align:centerが効かない」や「中央寄せにならない」などと悩むことがなくなります。

ブロック要素にtext-align:centerを指定しても要素自体は中央に寄らない

ブロック要素に対してはtext-align:centerは効いてくれません。
なので先ほどの例でもあったdivに対してtext-align:centerを指定してもdiv自体が中央によるのではなく、中のインライン要素のみが中央寄りになったはずです。

marginを使って中央寄せ

ブロック要素を中央寄せにしたい場合はブロック要素の左右のmarginをautoにしてあげることで中央寄せにすることができます。
今回の場合、上下のmarginはなくても良いのでmargin:0 auto;と指定します。

左右のmarginをautoにすることで自動で余白を決めてくれるのでそれによって中央寄せになるということです。

HTML

CSS

因みにこの状態でcssの2行目のtext-alignを外すとこのようになります。

ブロック要素自体を中央寄せにして、中のインライン要素の中央寄せが解除されてデフォルトの左寄せになります。

親要素に対しての中央寄せになることに注意!

ここで注意したいのが、marign:0 auto;は指定した要素の親要素に対しての中央寄せということです。
中央寄せを指定した要素の親要素が左寄せになっていた場合はその分左に寄った状態になります。

画面の真ん中に表示したかったのにずれてしまっているずれてしまっている場合はこのパターンに気を付けましょう。

この場合、どうするかというと、親要素も中央寄せにする

または親要素の横幅を横いっぱい(width:100%)に指定するなどで調整しましょう

作りたいデザインに応じて対応方法を変えるようにしましょう。

インライン要素の中のブロック要素だと上手くいかない!

「margin:0 autoが効かない」の原因でよくありがちなのが、中央寄せにしたい要素の親要素がインライン要素だった場合です。
インライン要素には
 imgselectinputbuttontextarea
などの置換要素といって横幅をしていできるものと
 spanabstrong
などの非置換インライン要素といってwidthやheightが指定できないものがあります。

よくあるものとしてはaタグの中にdivを配置する場合です。

この場合、インライン要素であるaタグの中にブロック要素であるdivがあるので、divが親要素をはみ出した状態になっているので、いくらmargin:autoを指定しても思ったような中央寄せにはなりません。そしてaタグに対してwidthを指定しても、非置換インライン要素であるaタグに横幅を指定はできませんので結果はみ出したままになります。

これを解決するためには、aタグに対してdisplay:blockを指定します。そうすると幅を指定できますので中央寄せも上手く機能します。

インラインブロック要素の中央寄せ

インラインブロック要素はインライン要素とブロック要素のいいとこどりをしたような要素になります。
なので今回の場合はwidthやheightも指定できますし、text-alignも指定できます。

HTML

CSS

上下中央寄せ

次に上下の中寄せについて解説していきます。
上下中央寄せに関しては、左右中央寄せで指定したmarginのautoは使えませんので注意してください。

インライン要素の上下中央寄せ

インライン要素の上下中央寄せは隣り合う要素を基準として中央寄せされます。

中央寄せにしたいインライン要素に対してvertical-align: middle;を指定します。

HTML

CSS

ブロック要素の上下中央寄せ

ブロック要素の上下中央寄せは少し複雑になります。

absoluteを使って中央に寄せる

要素を上下中央に配置するためにまずは親要素position:relative;に指定します。
そして中央寄せにしたい要素をposition:absolute;にしてtop:50%;で親要素の上から50%に移動させます。

しかしこれだけでは親要素の50%の位置に中央寄せしたい要素の上辺が来てしまうので、transform: translateY(-50%);を使って要素の50%の長さ分上に移動させることで、親要素の丁度上下中央の位置にもってくることができます。

HTML

CSS

上下左右の中央寄せ

この方法は左右の中央寄せにも使えますので、上下左右の中央寄せを完成させることができます。

HTML

CSS

flexboxを使って上下左右中央寄せにする

その他にflexboxを使って上下左右の中央寄せもできます。
flexboxとはFlexible Box Layout Moduleのことで名前通りに要素を簡単かつ柔軟にレイアウトできちゃうよという機能です。
使い方としては、親要素にdisplay:flex;を指定してFlexコンテナに指定します。その中に、Flexアイテムと呼ばれる子要素を入れるだけです。これに水平方向の配置に関する設定justify-contentで中央を指定。垂直方向の配置に関する設定align-itemsも中央を指定するだけです。flexboxでは異なる要素同士でも簡単に中央寄せにすることができます。

HTML

CSS

まとめ

いかがでしたか、中央寄せの設定はここに書いただけではなくもっと様々な状況に応じて対応していく必要があります。
初心者の方がハマりそうなポイントはこの記事に載っていると思いますので参考になれば幸いです。
今回最後に紹介したflexboxはちょろっとしか記述してないですが特に柔軟かつ簡単に色々なレイアウトを組むことができますので、それは別な記事で取り上げていきたいと思いますので!

へばっ!!

Pocket

コメントを残す

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

CAPTCHA