【HTML・CSS】中央寄せにする方法
Web Basic Archive
HTMLでデザイン上、要素を中央に表示したいケースは非常に多いと思われますが、上手くいかないことはありませんか？ この記事では、CSSで行う基本的な中央表示の方法を確認していきます。また中央寄せは、水平方向（左右）だけでなく、垂直方向（上下）もありますので、それぞれのテクニックを見ていきましょう。
目次
text-align : centerで中央寄せ（水平方向・インライン要素）
文字や画像などをセンタリングさせたい時は、CSSのtext-alignプロパティを使用します。水平方向の位置を指定できます。デフォルトでは、leftになっているので、centerを指定します。
上手く中央にいかないときに確認したいのが、指定する要素がブロックレベルなのかインライン要素なのかどうかです。text-alignプロパティは、ブロック要素のなかのインライン要素に機能するプロパティなので、ブロック要素自体の水平配置には効果がありません。指定した要素の子要素に反映されます。また、子孫要素に継承されていきますので、親要素に設定したセンタリングが意図せずに孫要素に反映されてしまう場合は、改めてtext-alignプロパティを孫要素に設定する必要があります。
text-alignプロパティの詳細、ブロックレベル要素とインライン要素の区別など下記リンクに詳しく紹介されています。
参考サイト
上手くいかない時の確認点
- ブロック要素に指定する。指定したブロック要素のなかのインライン要素に機能する。
- ブロック要素自体には機能しない。
- 孫要素にも継承される。
コードサンプル
<body>
<p>センタリングします。</p>
</body>
p {
text-align: center;
}
See the Pen text-align:center by web-basic-archive (@web-basic-archive) on CodePen.
margin: 0 auto で中央寄せ（水平方向・ブロック要素）
text-align:center がインライン要素に作用することに対して、ブロック要素自体をセンタリングさせたい場合の基本的なテクニックとしては、このmargin: 0 autoがあげられます。
上下方向は０px、左右方向にはautoの値を指定します。しかしこのまま設定しても、中央寄せにはなりません。下記の注意点を確認しましょう。
上手くいかない時の確認点
- 中央寄せしたいブロック要素の大きさ（width）を設定する必要がある。
- 親要素の大きさに対してのmarginの配置になるので、親要素の大きさも確認、または指定する。
コードサンプル
<body>
<p>センタリングします。</p>
</body>p {
margin: 0 auto;
width: 180px;
}See the Pen margin: 0 auto by web-basic-archive (@web-basic-archive) on CodePen.
display: inline-blockで中央寄せ（水平方向・widthを指定しない）
margin: 0 autoの方法では、widthを指定しなければなりませんが、内容量に応じて横幅を流動的にしたい場合は、この方法を用います。
display: inline-blockを要素に指定すると、内容量に応じた横幅になり、text-align: centerの方法で中央寄せを設定します。
上手くいかない時の確認点
- 親要素にtext-align: centerを指定する。
- 要素自体の中身（子要素）もセンタリングされるので、左寄せにしたい場合は、改めてtext-align: leftを指定する。
コードサンプル
<body>
<div>
<p>センタリングします。</p>
</div>
</body>div {
text-align: center;
}
p {
display: inline-block;
text-align: left;
}See the Pen display: inline-block by web-basic-archive (@web-basic-archive) on CodePen.
vertical-align: middle + テーブルセル（垂直方向）
縦位置の中央寄せを行う場合には、text-alignプロパティのように、vertical-alignプロパティが利用でき、インライン要素とテーブルセル要素に指定できますが、仕組みが少し複雑になります。vertical-alignのみの使用は難しく、display: table、table-cellと組み合わせることで中央寄せを実現していきます。
上手くいかない時の確認点
- vertical-alignプロパティは、そのままでは、兄弟要素の整列に使用するものなので、親要素に対して揃えることはできない。
- 親要素にdisplay: table、中央寄せを行いたい要素にdisplay: table-cellを指定して、疑似的なテーブルとして扱う必要がある。
- 親要素には高さ（height）の指定が必要になる。
コードサンプル
<body>
<div>
<p>センタリングします。</p>
</div>
</body>div {
display: table;
height: 100px;
}
p {
display: table-cell;
vertical-align: middle;
}See the Pen vertical: center by web-basic-archive (@web-basic-archive) on CodePen.
padding上下同じ値（垂直方向・手動で設定）
非常にシンプルな方法ですが、垂直方向に中央寄せを行いたい要素のpaddingの上下の値に同じ量を設定することによって配置する手法です。垂直方向の設定がどうしても上手くいかない場合に、手動で設定することも選択肢の一つではないでしょうか。
marginでも同じように設定可能ですが、その場合は、前後の要素と相殺される恐れがあるので、思ったように配置されない場合があり注意が必要です。
コードサンプル
<body>
<div>
<p>センタリングします。</p>
</div>
</body>p {
padding: 30px 0;
}See the Pen padding top/bottom Same value by web-basic-archive (@web-basic-archive) on CodePen.
position: absolute + margin: auto（水平垂直・ブロック要素）
絶対配置を利用して、上下左右の中央寄せを行います。この場合は、ブロック要素のmargin: autoも利用するので、要素の大きさ（width・height）を指定する必要があります。
上手くいかない時の確認点
- 絶対配置を利用するので、親要素には、position: relativeを指定します。
- top,bottom,left,rightには、０を指定します。
- 要素のwidthとheightを指定します。はみ出してしまう場合は、親要素の大きさも指定が必要。
<body>
<div>
<p>センタリングします。</p>
</div>
</body>div {
position: relative;
}
p {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 250px;
height: 100px;
background: #D4EDEA;
}
See the Pen position: absolute + margin: auto by web-basic-archive (@web-basic-archive) on CodePen.
position: absolute + transform（水平垂直・ブロック要素）
前述の絶対配置とmarginを利用する方法では、大きさ（width・height）の指定が必須でしたが、高さの指定は内容に合わせて流動的にしたい場合は、大きさの指定が必要ない、このtransformを利用する方法がおすすめです。
上手くいかない時の確認点
- 親要素には、position: relativeを指定します。
- top, leftには、50%を指定し、transformのtranslateでそれぞれ、X・Yの値を-50%に指定し中央に戻します。
- 要素のmarginが影響する場合は、0に設定しておく。
コードサンプル
<body>
<div>
<p>センタリングします。</p>
</div>
</body>div {
position: relative;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
background: #D4EDEA;
margin: 0;
}See the Pen position: absolute + transform by web-basic-archive (@web-basic-archive) on CodePen.
display: flex で中央寄せ （水平・垂直）
中央寄せのレイアウトを組む場合に、柔軟に対応できるのがこのフレックスボックスの方法です。要素の大きさを指定する必要もありません。display: flexを指定した子要素に機能します。
フレックスボックスについては下記のサイトで詳しく紹介されています。
参考サイト
上手くいかない時の確認点
- 中央寄せを行いたい親要素に、display: flexを指定します。
- デフォルトでは、高さが自動で親要素に合わせる設定となっているので、align-items: centerの設定が必要。
コードサンプル
<body>
<div>
<p>センタリングします。</p>
</div>
</body>div {
display: flex;
justify-content: center;
align-items: center;
}See the Pen display: flex by web-basic-archive (@web-basic-archive) on CodePen.
