【初級者向け】中央揃えを学ぶならまずはここからーCSS解説シリーズ2ー

はじめに

みなさんはCSSを使って、中央寄せをする方法は何が思いつくでしょうか。
Google検索で「css 中央寄せ」と検索してみるとたくさんでてきて、どれ使えば良いの？となりますよね。

そこで今回は、短いコードで簡単に中央寄せできるコードをお伝えいたします。

左右中央寄せの紹介

テキストの中央寄せについて

pタグ、aタグのようなインライン要素と呼ばれるタグや、div、h1、h2・・・の中身のテキストの中央寄せの場合

つまり、文章自体を中央に寄せたいという場合には、text-align:center;を使用します。

※わかりやすいように背景色を適用しています。

のように左側に寄っていますが、
ここにtext-align:center;を適用すると・・・

とテキストが中央に配置されます。

ブロック要素の中央寄せ

div要素のようなブロック要素に横幅（width）を指定している場合は、margin:0 auto;で中央へ寄せることができます。

中央寄せ前ではこのように左側にブロック要素が寄っていますが、margin:0 auto;を適用すると・・・

となります。
margin:0 auto;を利用した中央寄せは、webサイトのレイアウトとしてほとんどのサイトで利用することになりますので、
是非マスターしてみましょう。

上下中央寄せ

いよいよ上下中央寄せの方法を紹介します。

display:flex;を使用したテキストの上下中央寄せ

上下中央寄せを行う場合、高さの指定をする必要があります。
ですので、heightで高さを指定しています。

.center{
width:50%;
height:200px;
}

テキストの上下中央揃えは、↓の3行を指定してあげれば、適用されます。
display:flex;
justify-content:center;
align-items:center;

.center{
height:200px;
　 display:flex;
justify-content:center;
align-items:center;
}

flexは横並びや中央寄せだけではなく、レイアウトを簡便に行うことができるプロパティで、縦方向に並べ直したり、コンテンツの順番を入れ替えたりと、大活躍しますので、マスターしてしまいましょう！

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

ブロック要素の上下中央寄せの場合にはpositionとmargin:auto;を利用して中央に寄せます。

.center{
width:50%;
height:200px;
}

positionの使い方に則って、
移動元にposition:relative;を、
移動させたいものにposition:absolute;を適用します。

上下中央揃えにする場合は、top,bottom.right.leftに対して0を指定し、最後にmargin:auto;をかけます。

.center{
width:50%;
height:200px;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
}

ブロック要素を上下中央寄せする機会は多くないですが、知っておくと、いざというときに役立ちます。

あとはここまでで紹介したものを組み合わせていきます。

おわりに

今回あげている方法はレスポンシブ対応と呼ばれる端末のサイズによってデザインの変更が必要な時に使いやすいものばかりです。
なので皆さんが実装したいデザインに合わせて、上記の方法からより最適なものを選んでみてください。

今回紹介した方法以外にも、上下中央揃えの方法はたくさんあります。
サイトに適切なコードの書き方を学びたいという方や、デザインと一緒に、コードを書けるようになって、副業で稼ぎたいという方は
まずは無料のカウンセリングでお話をお聞かせください

無料カウンセリングで相談する

次回に続く