CSSで中央にセンタリングする方法とは？テキストやブロック要素などまとめて解説

CSSを使って、テキストや画像を中央に寄せたいときがありますよね。

センタリングする方法を知ってはいても、それがどんな要素に効くものなのか曖昧にしてはないでしょうか？

今回は、CSSのセンタリング方法をきちんと理解したいという方のために、場面に応じたセンタリングの指定方法を解説します。

ぜひ最後まで読んでくださいね！

左右をセンタリングするには

まずは左右でセンタリングしたいときの方法を2つ紹介します。

テキストと画像をセンタリング

テキストをセンタリングする例として、以下のHTMLを使います。

<p>テキストを中央に</p>

CSSは以下のように記述します。

p { text-align: center }

テキストをセンタリングしたいときには、「text-align: center」を指定します。

この指定は、p要素の親要素に対して行っても問題ありません。

ページ全体のテキストを中央に配置したい場合には、bodyに指定すると良いでしょう。

この方法は、画像を中央に置きたいときにも使うことができます。

<div>
<img src="sample.png">
</div>

CSSは以下のように記述します。

div { text-align: center }

画像の場合は、img要素ではなく、div要素で囲うなどして親要素に指定する必要がありますね。

ブロック要素をセンタリング

ブロック要素をセンタリングしたい場合には、以下のように書きます。

<div class="example">ブロックを中央に</div>

CSSは以下のように記述します。

.example {
  margin: 0 auto;
  width:150px;
  background: skyblue;
}

ブロック要素をセンタリングするには、左右のmarginにautoを指定します。0は上下のmarginですね。

分かりやすいように、背景に色を付けました。

上記のように記述すると、親要素の幅の中央に子要素が配置されます。

ただし、中身のテキストは左寄りのままなので、ここもセンタリングしたい場合には、前述の「text-align: center」を使いましょう。

上下をセンタリングするには

続いて、上下でセンタリングする方法を紹介します。

1行のテキストをセンタリング

1行のテキストをセンタリングする方法は簡単です。

<div class="parent">
  <p>短いテキスト</p>
</div>

CSSは以下のように記述します。

.parent {
  height: 150px;
  background: skyblue;
}
.parent p {
  line-height: 150px;
}

1行のテキストを上下にセンタリングするには、テキストの高さを示すline-heightプロパティを使います。

テキストの高さを親要素の高さと等しくすることで、親要素の中央に配置されます。

複数行のテキストや要素をセンタリングするには、この後で紹介する上下左右両方のセンタリング方法を活用してみてください。

上下左右ともにセンタリングするには

最後に、上下左右の幅に合わせてセンタリングする方法を2つ紹介します。

HTMLコードは、共通のものを使用します。

<div class="parent">
 <div class="child">要素をセンタリング</div>
</div>

それぞれのCSSを見ていきましょう。

positionプロパティを使う方法

positionプロパティを使用して、要素のセンタリングができます。

.parent{
  position: relative;
  height: 300px;
  background: #ccc;
}
.child{
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
  padding: 20px;
  background: skyblue;
}

親要素に「position: relative」を指定し、親要素を基準にして子要素の位置を決めます。

「top: 50%; left: 50%」と指定していますが、これは子要素の左上の頂点の位置を示します。

transformプロパティを使って、X軸方向（横）とY軸方向（縦）に要素の半分のサイズだけ移動させる必要があります。

子要素の横幅を指定しなくていいので、要素の幅が変化するときに使えますね。

flexboxを使う方法

Flexboxを使う方法でもセンタリングが可能です。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background: #ccc;
}
.child {
  width: 200px;
  background: skyblue;
}

「display: flex」を指定することで、要素をFlexboxにすることができます。

「justify-content: center」と「align-items: center」を合わせて指定すると、上下左右の中央に要素が配置されます。

さらに、「flex-direction: column」を加えると、複数の要素を中央に配置したまま縦に並べることができますよ。

まとめ：状況に応じてCSSを使い分けよう

今回は、CSSでテキストや画像、要素などをセンタリングする方法を紹介しました。

テキストのみのセンタリングするのか、要素ごとセンタリングするのかで方法が違いましたね。

Webページを制作する上で、今回の記事が参考になれば幸いです。