この記事では、意外と忘れがちなCSSの中央寄せ実装方法を「上下」「左右」「上下左右」の3つに分けて簡単にまとめてみました。どのような場面で実装するのかという点もわかりやすく解説しております。こちらはコピペで使用できますので、そのまま実装してみてください。
共通のHTMLとCSSのコード
今回の記事で紹介するCSSでは、以下のHTMLを共通として実装していきます。
<div class="wrap">
<div class="text">ここにテキストが入ります。</div>
</div>また、中央寄せの実装をよりわかりやすく可視化するために、こちらのCSSを常に指定した状態で実装を進めます。
.wrap {
border: 1px solid red;
height: 100px;
}
.text {
border: 1px solid blue;
}CSSで左右を中央寄せにする方法
まずは、左右を中央寄せにするCSSの実装をみてみましょう。
margin: 0 auto;
こちらは、ブロック要素を中央寄せしたい場合によく使われる方法です。
.text {
width: 80%;
max-width: 200px;
margin: 0 auto;
}ブロック要素はデフォルトだとwidthが100%なので、100%以下のサイズに指定することを忘れないよう注意しましょう。ちなみに幅の指定はpxではなく%にしておくと、レスポンシブに対応してて便利です。
text-align: center;
こちらは、ブロック要素内のテキストや、画像などのインライン要素を中央寄せしたい場合によく使われる方法です。
.text {
text-align: center;
}注意したいのは、ブロック要素自体は中央寄せにならない点です。ブロック要素内のインライン要素に対して左右の中央寄せを実装したい場合に使用しますので、ブロック要素自体を中央寄せする時は、先ほどのmrgin: 0 auto;を使用しましょう。
display: inline-block;
こちらは、横幅（width）を指定せずに、文字量によって横幅を変えたい場合の中央寄せでよく使われる方法です。
.wrap {
text-align: center;
}
.text {
display: inline-block;
}ちなみにこれだと文字も中央寄せになってますが、.textにtext-align:left;を指定してやれば、ブロック自体は中央寄せのまま、テキストを左寄せにできます。
justify-content: center;
こちらは、display: flex;を指定している時に有効な左右の中央寄せになります。
.wrap {
display: flex;
justify-content: center;
}注意点として、テキストは左寄せのままなので、要素内のテキスト自体を中央寄せしたい場合は、text-align: center;を.textに指定する必要があります。
CSSで上下を中央寄せにする方法
次に意外と忘れがちな上下の中央寄せについて、CSSの実装をみてみましょう。
line-height
こちらは、親要素に高さの指定がしてある場合に使われる方法です。ヘッダーやボタンなどでよく見られる実装ですね。
.text {
line-height: 100px;
}100pxの部分をご自身の親要素の高さに変えてあげると、上下が中央寄せされるはずです。注意点として親要素の高さを変えるとズレるので、変える場合はこちらのline-heightの値も一緒に変えましょう。
position + transform
こちらは、positionとtransformで実装したもので、割と色々な場面で使用します。上下左右の中央寄せでよく使用されますが、上下だけの場合でもこちらは結構便利なので、覚えておきましょう。
.wrap {
position: relative;
}
.text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}これで中央寄せになる理由は、要素の左上を起点としてtop:50%;だと子要素の上部が中央になるので、微妙に下にズレてて真ん中になってません。なのでtransform:translateY(-50%);で子要素のY軸の半分を元に戻してやると、要素の真ん中から中央寄せになるため、上下の幅が整って真ん中になります。
vertical-align: middle;
こちらは、インライン要素とテーブル要素にのみ実装できる方法です。.text側にdisplay: table-cell;の指定を忘れないよう注意しましょう。
.wrap {
display: table;
width: 100%;
}
.text {
display: table-cell;
vertical-align: middle;
}あまり使う場面はないかもしれませんが、横並びで縦の幅を揃えたい時などに有効な実装方法になります。line-heightと似た感じの動作ですね。
align-items: center;
こちらは、display: flex;を指定している時に有効な上下の中央寄せになります。
.wrap {
display: flex;
align-items: center;
}結論からいうと、display:flex;にして問題なければ一番簡単に実装できるので、上下中央寄せの場合はこれを使用しましょう（笑）。
というくらいよく使うので、覚えておきましょう。
CSSで上下左右を中央寄せにする方法
最後に、上下左右を中央寄せするCSSの実装をみてみましょう。
position + margin
こちらはpotisoinとmarginを使った上下左右の中央寄せになります。
.wrap {
position: relative;
}
.text {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 50%;
height: 50%;
}この上下中央寄せが実現する条件として、「上下左右とwidthとheightの指定がauto以外」「marginが全てauto」の場合に有効になります。
ちなみに、縦だけや横だけの中央寄せも実はそれぞれこの方法で実装できるのですが、上で紹介した内容で簡単に実装可能ですし、記述が増えるだけで推奨しない方法なので両方紹介を省いています。
position + transform
こちらは上下の中央寄せでも紹介したpositionとtransformを使った実装方法になります。
.wrap {
position: relative;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}これで中央寄せになる理由は、上でも紹介した通りです。Y軸とX軸を-50%にすることで、子要素の真ん中から中央寄せになるよう半分元に戻しているので、上下左右が中央寄せになります。
左右だけの中央寄せもこれで実装できますが、記述が増えるだけで、これでやる必要は全くないので紹介を省いています。
justify-content + align-items
こちらは、display: flex;を指定している時に有効な上下左右の中央寄せになります。
.wrap {
display: flex;
justify-content: center;
align-items: center;
}こちらも結論からいうと、display:flex;にして問題なければ一番簡単に実装できるので、上下左右中央寄せの場合はこれを使用しましょう！！
まとめ
というわけで、今回は結構忘れがちなCSSの中央寄せについて解説していきました。
全てコピペで使えますので、任意のclass名に変えて使用してみてください。
CSSについてもっと学びたい方は、以下の書籍が実務でも使えるほど優秀な書籍なので、ぜひ購入してみてください。
ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座
また、WEB制作を勉強したいという方は、完全未経験でも問題ない独学ロードマップの記事がありますので、こちちらを是非活用してみてください！
