【CSS】span要素を
センタリングする3つの方法

「p」タグなどのテキストを中央表示（センタリング）させたい場合、「text-align: center」を指定すると簡単です。

ですが、span要素には「text-align: center」を直接指定しても、センタリングは出来ません。

なるべくカンタンにセンタリングさせたいと調べたところ、span要素をセンタリングするにはいくつか方法がありました。

ここでは、簡単にspan要素を中央表示（センタリング）する方法を3つまとめています。

HTMLでdiv要素に入れてセンタリング

1つは、span要素をdiv要素に入れて、親div要素に「text-align: center;」を指定する方法。

CSSは1行ですみますが、HTML側でdiv要素を加えないといけないので、ちょっと手間です。

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

.box{
  text-align: center;
}

transformでセンタリング

また、transformを使って中央に表示する方法もあります。

span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

この方法はspan要素に限らず、要素を画面中央に表示する時などにとても便利です。

「position: absolute;」で絶対配置にして、「top: 50%;」「left: 50%;」を指定します。

これだけでは、画面の上から50％、左から50％の位置を 起点に要素が表示されるだけです。

「transform: translate(-50%,-50%);」とすることで、自身の幅と高さ50%を自動で差し引いて、きっちり画面中央に配置することができます。

親要素を基準にセンタリングする場合には、親要素に「position: relative;」を指定しておくひと工夫が要ります。

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

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

この方法は応用が効いて便利なのですが、span要素をセンタリングしたいだけだと、ちょっと大掛かりな感じがします。

displayでセンタリング

一番シンプルなのは、「display:block」と「text-align: center;」の2行だけでセンタリングする方法です。

span{
  display: block;
  text-align: center;
}

ただspan要素をセンタリングしたいだけなら、この方法が一番シンプルです。

「display: block;」ではなく
「display: inline-block;」でセンタリングすることも出来ます。

その場合は「width: 100%;」も必須になります。

span{
  display: inline-block;
  width: 100%;
  text-align: center;
}

ここではspan要素に直接指定していますが、一部のspan要素にだけ適用したい場合も多いですよね。

その場合は、classを作って指定してあげればOKです。

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

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