HTML,CSSで要素を中央に寄せる方法完全版【CSS】
「中央に寄せる方法」をよく検索するのでまとめました。
目次
インライン要素の左右中央寄せ
インライン要素を中央に寄せるには、その親要素にtext-align: centerを設定します。
.text-align-center {
text-align: center;
}span要素やテキストが左右中央に寄ります
p要素のコンテンツ（テキスト）を左右中央に寄せています。
<p class="text-align-center">xyz</p>
<p class="text-align-center">xyz<span>ABC</span>xyz</p>xyz
xyzABCxyz
長いテキストは折り返した部分も左右中央に寄ります
ブロック要素には効果がありません
包括されているテキストには影響がでていますが、ブロック要素には効きません。
<div class="text-align-center width70"> div1
<div class="text-align-center width70"> div2
<div class="text-align-center width70"> div3 </div>
</div>
</div>上下位置には影響しません
高さのあるブロック要素にtext-alignを設定してみます。
テキストは左右中央に寄っていますが、上下の位置はそのままです。
子孫要素に継承されます
親のdiv要素にしかtext-alignを設定していませんが、子孫要素のテキストが左右中央に寄っています。
<div class="text-align-center"> div1
<div> div2
<div>div3</div>
</div>
</div>インライン要素の上下中央寄せ
line-heightを使用して、親要素と行高さを揃えると上下中央に寄ります。
.line-height-5rem {
line-height: 5rem;
}⇩親要素の高さが5remとしましょう
⇩以下は、親要素高さ5rem、line-heightも5remに設定した場合
line-heightは子孫に継承されます。この場合は親子どちらかの指定で上下中央に寄ります。
複数行のインライン要素の上下中央寄せ
複数行には、長いテキストの場合や複数のp要素で構成されることがあります。
line-heightを前述のように適用すると、1行の高さが親要素いっぱいになり2行目以降はみ出してしまいます。
複数行の場合は子要素をブロックとして扱い、それを上下中央に寄せていきます。
いくつか手法はありますが、ここでは、flex-boxレイアウトを使用して上下中央に寄せています。ブロック要素の上下中央寄せが参考になります。
.container {
display: flex;
justify-content: center;
flex-direction: column;
}長いテキストの場合
複数のp要素
abc
def
複数のインライン要素の上下中央揃え
vertical-alignを使用すると高さの異なるインライン要素を上下中央に揃えることができます
vertical-alignは各子要素に設定します。自分のbase-lineをどこにするかの指定です。
全ての子要素にvertical-align: middleを指定して上下中央に寄せます。
ブロック要素の左右中央寄せ
margin: 0 auto; を使用します。
marginleft: auto, margin-right: auto, でも良いです。
.block-center {
margin: 0 auto;
}<div class="block-center width-70pc">
<div class="block-center width-70pc"></div>
</div>このとき、ブロック要素の幅が決まっていることが必要です。横幅いっぱいであればそもそも中央に寄れません。
ブロック要素の上下中央寄せ
top:50%で配置して、マイナスmarginで半分上方向に戻す方法
マイナスmarginで要素サイズの半分を戻します。要素サイズを知っている必要があります。
.box3 {
position: relative;
}
.box33 {
width: 80px;
height: 80px;
position: absolute;
top: 50%;
margin-top: -40px;
}top:50%で配置して、translate()で、-50%上方向に戻す方法
.box3 {
position: relative;
}
.box34 {
width: 80px;
height: 80px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}ブロック上下左右中央寄せ
grid
gridのplace-items: centerを使用する方法
.box4 {
display: grid;
place-items: center;
}flexbox
上下中央、左右中央を指定します。
.box5 {
display: flex;
justify-content: center;
align-items: center;
}0距離+margin:auto
position:absoluteで各辺の距離を0に指定し、margin:0にすると中央に寄ります。
.box6 {
position: relative;
}
.box66 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}50%位置に配置して要素の50%戻すタイプ
.box8-1 {
position: relative;
}
.box8-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}table-cell化
親は、display:table, 子はdisplay:table-cellとする。
子は広がって配置される。子が1つしかなければ親（table）に対して全体に広がる。子へのサイズ指定は意味が無い。
.box7 {
display: table;
}
.box77 {
display: table-cell;
vertical-align: middle;
}重なりを確認するため親要素にpaddingを設定しています。
考察まとめ
flex, grid が簡単に中央寄せが可能。
CSSプロパティ名に注意。flexとgridで違います。
参考資料
Web スタイルシートCSS ヒントとトリック センタリングの基礎を簡単に説明
要素を中央に配置 mdnよりflexでの中央寄せを紹介
text-align 真ん中だけでなく右寄せ、左寄せができます
line-height 行高さを指定します
vertical-align fontのbase-lineを指定します