【CSS】
要素を中央表示する！
センタリング方法5つ

ここでは、CSSでよく使う要素を中央表示（センタリング）する方法をまとめています。

主に「text-align」だけではうまく中央表示できない要素をセンタリングする方法あれこれを集めてみました。

marginで要素を中央表示する

親要素に対して左右の幅が余っているdiv要素は、左右を「auto」（自動）とするとセンタリングされます。

<div class="sample">
  <span>要素</span>
</div>

.sample{
  margin: 0 auto;
}

「0」は上下の、「auto」は左右の余白の指定です。

text-alignで中央表示する

要素をdivで囲み、そのdivに対して「text-align: center」を指定します。

span要素など、直接「text-align: center;」を指定できない要素でも、親要素に指定することで中身をセンタリングできます。

<div class="box">
  <span>スパン要素</span>
</div>

.box{
  text-align: center;
}

text-align＋display: blockで
中央表示する

要素をブロック要素にする事で、div要素で囲まずに「text-align: center;」を適用する方法もあります。

span要素などをdiv要素を追加せずにCSSだけでセンタリングしたい時にベンリです。

<span class="sample">スパン要素</span>

.sample{
  display: block;
  text-align: center;
}

flexで要素を中央表示する

こちらはflexを使ったセンタリング方法です。

「display: flex」は2つの要素を左右に並べる時におなじみですが、1つの要素をセンタリングする事も出来ます。

通常「display: flex」は、左右に並べたい2つの要素（子要素）を、1つのdiv要素（親要素）で囲んで使います。

この時、親要素に指定できるプロパティと、子要素に指定できるプロパティがあるのですが、1つの要素をセンタリングする時は、親要素に指定するプロパティを使います。

画像やテキスト、div要素も中央表示できます。

<span class="sample">スパン要素</span>

.sample{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

align-items: center
子要素の垂直方向の位置を中央に指定。親要素内での上下の中央表示に使います。

justify-content: center
子要素の水平方向の位置を中央に指定。左右をセンタリングするだけならこれ1つでOK。

flex-direction: column
子要素の並ぶ向きを指定。ここでは縦向き。
センタリングする要素が1つだけなら、なくてもOK。

flexについては、こちらのサイト様がめちゃくちゃ分かりやすくて勉強になります。

translateで要素を中央表示する

要素を絶対配置 にして「translate」で位置指定する方法です。

親要素に「position: relative;」を指定しておくことで、親要素内での中央表示もできます。

絶対位置にした要素の高さと幅を50%に指定しておき、「translate」で自身の高さと幅の50％を自動で差し引いて表示しています。

<div class="sample1">
  <span class="sample2">スパン要素</span>
</span>

.sample1{
  position: relative;
}
.sample2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}