CSSの中央寄せについてまとめてみた(左右・上下中央揃え)
CSSのセンタリングに関する記述方法をまとめています。
水平方向のインライン要素・ブロック要素、垂直方向のインライン要素・ブロック要素、さらに水平垂直方向のインライン要素・ブロック要素という流れです。
それぞれ単一要素・複数要素のバリエーションまで紹介しています。
CSSの中央寄せについて
本記事ではCSSによる要素の水平方向・垂直方向のセンタリング、さらには左右上下中央に配置する方法をまとめています。
導入する環境によって影響を受ける可能性がありますが、基本の流れは本記事の通りです。
様々な方法がありますが、基本的に使う方法を一つに決めて、それが適用できない箇所にのみ別の手段を適用するようにしましょう。
水平方向の中央寄せ:インライン要素
要素のセンタリング
aタグやspanタグ、imgタグなどのインライン要素を中央に配置するには「text-align: center;」を使います。
<div class="desk"> <img src="../images/css_centering_img2.png" alt="item"> </div>
.desk { text-align: center; padding-bottom: 40px; //下に余白を作っています }
記述事例
複数要素のセンタリング
複数のインライン要素がある場合も同様で、「text-align: center;」を使用する事でセンタリングが可能です。
<div class="desk"> <img src="../images/css_centering_img2.png" alt="item"> <span>テキスト</span> <img src="../images/css_centering_img2.png" alt="item"> </div>
.desk { text-align: center; padding-bottom: 40px; //下に余白を作っています }
記述事例
Flexboxによる中央寄せ
親要素のdisplayタイプを「flex」にする事で、中の要素を簡単に中央揃えにする事ができます。
<div class="desk"> <img src="../images/css_centering_img2.png" alt="item"> </div>
.desk { display: flex; justify-content: center; padding-bottom: 40px; //下に余白を作っています }
記述事例
複数要素のFlexboxでのセンタリング
インライン要素が複数ある場合でも、センタリングは普通に機能します。
<div class="desk"> <img src="../images/css_centering_img2.png" alt="item"> <span>テキスト</span> <img src="../images/css_centering_img2.png" alt="item"> </div>
記述事例
CSSグリッド
グリッドコンテナを使用すると、要素はグリッド領域に応じて中央に配置されます。
<div class="desk"> <img src="../images/css_centering_img2.png" alt="item"> </div>
.desk { display: grid; justify-content: center; padding-bottom: 40px; //下に余白を作っています }
記述事例
複数要素のGridでのセンタリング
グリッドの場合、複数ある要素を横並びにする事はできません。
要素自体がブロック要素のような扱いになるので、下の段に落ちてセンタリングされる事になります。
<div class="desk"> <img src="../images/css_centering_img2.png" alt="item"> <img src="../images/css_centering_img2.png" alt="item"> </div>
.desk { display: grid; justify-content: center; padding-bottom: 40px; //下に余白を作っています }
記述事例
Gridで複数要素をセンタリングする方法
複数要素がある場合、その要素が別にラッピングされている必要があります。
<div class="desk"> <div class="c_wrap"> <img src="../images/css_centering_img2.png" alt="item"> <span>テキスト</span> <img src="../images/css_centering_img2.png" alt="item"> </div> </div>
.desk { display: grid; justify-content: center; padding-bottom: 40px; //下に余白を作っています }
記述事例
囲っているc_wrap要素にはスタイルを適用する必要はありません。
このように別要素で囲う事で複数要素がセンタリングされます。
水平方向の中央寄せ:ブロック要素
マージンauto
幅と高さが指定されているブロック要素は、左右の余白に自動値が反映されセンタリングをする事ができます。
<div class="desk"> <div class="plate"> <img src="../images/css_centering_img2.png" alt="item"> </div> </div>
.plate { width: 120px; height: 120px; margin-left: auto; margin-right: auto; padding-bottom: 40px; //下に余白を作っています }
記述事例
複数要素の場合のマージンauto
複数ブロック要素の場合は、対象の要素自体をラッピングする要素がないとセンタリングはできません。
<div class="desk4 tray"> <div class="tray"> <div><img src="../images/css_centering_img2.png" alt="item"></div> <div><img src="../images/css_centering_img2.png" alt="item"></div> </div> </div>
注意
trayのclass属性を親要素とラッピング要素の両方に設置しています。
.tray { display: flex; margin-left: auto; margin-right: auto; padding-bottom: 40px; //下に余白を作っています }
記述事例
Flexboxによる中央寄せ
Flexboxを使用する事でも要素をセンタリングできます。
<div class="desk"> <div> <img src="../images/css_centering_img2.png" alt="item"> </div> </div>
.desk { display: flex; justify-content: center; padding-bottom: 40px; //下に余白を作っています }
記述事例
複数ブロック要素におけるFlexbox
複数要素の場合もFlexboxであれば、要素を別にラッピングする必要なくセンタリングをする事ができます。
<div class="desk"> <div><img src="../images/css_centering_img2.png" alt="item"></div> <div><img src="../images/css_centering_img2.png" alt="item"></div> </div>
.desk { display: flex; justify-content: center; padding-bottom: 40px; //下に余白を作っています }
記述事例
CSSポジション:transform
<div class="desk"> <div> <img src="../images/css_centering_img2.png" alt="item"> </div> </div>
.desk { position: relative; height: 200px; padding-bottom: 40px; //下に余白を作っています }
絶対配置を使うので、ベース要素には高さをきちんと設定しておきましょう。
transformCSS
要素を絶対配置にすることで、transform:を使用して要素を簡単にセンタリングできます。
.plate { position: absolute; left: 50%; transform: translateX(-50%); }
transform記述事例
CSSポジション:マイナスマージン
要素の幅が決定されている場合は、transformの代わりにマイナスマージンを使用する事でも実現できます。
マイナスマージンCSS
.plate { position: absolute; left: 50%; margin-left: -60px; }
マイナスマージン記述事例
垂直方向の中央寄せ:インライン要素
垂直padding
要素を垂直方向に中央揃えする最も簡単な方法の1つは、paddingを使用する事です。
<div class="vert"> <img src="../images/css_centering_img2.png" alt="item"> </div>
.vert { padding-top: 48px; padding-bottom: 48px; }
記述事例
横方向はともかく縦方向は中央ぞろえできています。
複数要素の垂直センタリング
<div class="vert"> <img class="item_a" src="../images/css_centering_img2.png" alt="item"> <span class="item_b">テキスト</span> <img class="item_c" src="../images/css_centering_img2.png" alt="item"> </div>
垂直の整列は一つの要素に対して使用する事ができますが、複数要素の場合も同様です。
.vert { padding-top: 48px; padding-bottom: 48px; } .item_a, .item_b, .item_c { vertical-align: middle; }
vertical-alignは文字など他のブロック要素と位置を揃えるために設定しています。
記述事例
Flexboxによる中央寄せ
flexboxであれば、垂直paddingを使わずとも要素A・要素B・要素Cのそれぞれを垂直センタリングできます。
<div class="vert"> <img src="../images/css_centering_img2.png" alt="item"> <span>テキスト</span> <img src="../images/css_centering_img2.png" alt="item"> </div>
.vert { height: 200px; //高さを200pxにした場合 display: flex; align-items: center; }
記述事例
垂直方向の中央寄せ:ブロック要素
CSSポジション:transform
<div class="vert"> <div class="plate"> <img src="../images/css_centering_img2.png" alt="item"> </div> </div>
transformCSS
要素を絶対配置にする事により、transformを使用してブロック要素を垂直方向にセンタリングする事ができます。
.plate { position: absolute; top: 50%; transform: translateY(-50%); }
transform記述事例
CSSポジション:マイナスマージン
マイナスマージンCSS
要素の高さが決まっている場合は、transformの代わりにマイナスマージンが使用できます。
.plate { position: absolute; top: 50%; margin-top: -60px; }
マイナスマージン記述事例
CSSグリッド
gridとalign-itemsを使用すれば、要素をグリッド領域の垂直方向にセンタリングできます。
<div class="vert"> <img src="../images/css_centering_img2.png" alt="item"> </div>
.vert { height: 200px; //高さを200pxにした場合 display: grid; align-items: center; }
記述事例
水平および垂直の中央寄せ:インライン要素
paddingとtext-centerによる整列
paddingとtext-alignとを組み合わせて、要素を水平方向と垂直方向にセンタリングできます。
<div class="deskvert"> <img src="../images/css_centering_img2.png" alt="item"> </div>
.deskvert { text-align: center; padding-top: 24px; padding-bottom: 24px; }
記述事例
水平および垂直の中央寄せ:ブロック要素
CSSポジション
要素を左右方向に絶対配置させて、transformで要素の縦横半分のサイズだけ位置調整します。
<div class="deskvert"> <div> <img src="../images/css_centering_img2.png" alt="item"> </div> </div>
.deskvert { position: relative; height: 200px; //高さを200pxにした場合 } .deskvert img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
記述事例
Flexboxによる中央寄せ
Flexboxの場合、justify-contentとalign-itemsを中央に設定する事で簡単に実現できます。
<div class="deskvert"> <div> <img src="../images/css_centering_img2.png" alt="item"> </div> </div>
.deskvert { display: flex; justify-content: center; align-items: center; }
記述事例
CSSグリッド
gridとplace-itemsを使う事で、水平時のjustify-contentと垂直時のalign-itemsとを組み合わせたような効果があります。
<div class="deskvert"> <div> <img src="../images/css_centering_img2.png" alt="item"> </div> </div>
.desk { display: grid; place-items: center; }
記述事例
複数ブロック要素の水平垂直センタリング
複数のブロック要素を上下左右の中央に配置する事も出来ます。
<div class="deskvert"> <div class="i_wrap"><img src="../images/css_centering_img2.png" alt="item"></div> <div class="i_wrap"><img src="../images/css_centering_img2.png" alt="item"></div> </div>
ポイント
・FlexboxCSSかgridCSSを適用する
・中のブロック要素をインライン要素に変換する
.vert { height: 200px; display: grid; //今回はgridを選択しています。 place-items: center; } .i_wrap { display: inline; }