CSSで中央寄せする9つの方法（縦・横にセンタリング）

横センタリング（左右中央寄せ）

まずは、横方向に中央寄せする方法を見ていきましょう。

その1：文章を中央揃え

文章を左右中央に揃えたいときは、その文章が含まれる要素、もしくはその親要素に対してtext-align:centerを指定します。

pタグの親要素に対してtext-alignを指定しても、文字は左右中央に寄ります。ウェブページ全体の文字を真ん中に寄せてしまいたいならbody {text-align:center}とすれば良いわけですね。

その2：画像を中央寄せ（左右）

画像も文章と同じように扱うことができます。ただし、imgタグ自身ではなく、親要素に対して、text-align:centerを指定します。

<p>
  <img src="..." />
</p>

p {
  text-align:center;
}

その3：blockの要素を中央寄せ

ここから少し難しくなります。しかし、ここを理解しておかないと「中央寄せできない」や「text-align:centerが効かない」等とつまずくことになります。

ブロックの要素にtext-alignを使っても中央寄せにならない

pタグの親要素（例えばdiv）に対して、text-align:centerを指定しても、p全体は中央配置になりません。

「block（ブロック）って何?」という方は、下の記事に目を通すとサクッと理解できるはずです。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

blockの要素って何？

上の記事に書かれていますが、<p>、<div>、<h1>〜<h6>などのタグはdisplayの初期値がblockとなっています。text-alignでは、これらの中身の「文章」や「画像」を中央揃えにすることはできますが、要素自体を真ん中に寄せることはできません。

marginでセンタリング

「じゃあどうするのか」ということですが、marginプロパティを使えば簡単です。

「右の余白も左の余白も自動で決まるようにすれば、真ん中に配置される」というわけですね。「marginって何ぞ？」という方は下の記事を読んでみてください。イチから解説しています。

CSSのmarginとは？paddingとは？余白の指定方法まとめ

実際にやってみる

試しにdivタグを真ん中に寄せてみたいと思います。そのままの大きさでは、横いっぱいに広がってしまうのでwidthで幅を指定します。

<div class="example">例文</div>

.example {
  margin: 10px auto;
  width:50px;
  background: orange;
}

中央に寄っているのが分かるかと思います。説明する必要もないかもしれませんがmargin: 10px autoというのは省略した書き方で「上下の値は10px、左右の値はauto」という意味になります。

親要素の真ん中であることに注意

親要素がインラインだとうまくいかないので注意

「margin: ◯ auto」が効かない原因としてよくあるのが「そもそも親要素がインラインになってしまっている」ということです。display:inlineの解説の通り、インラインの要素にはCSSで幅を指定しても効きません。

displayの初期値がinlineの要素：<a>、<span>など

その4：inline-blockを活用してセンタリング

display: inline-blockを指定した要素は「ブロック」と「インライン」の中間のような扱いが可能になります。ブロックのように幅指定もできますし、インラインのようにtext-align指定もできるのです。

初期値でinline-blockを取るような要素はありません。自分で指定することになります。

ブロック要素をinline-blockにしてからtext-alignを指定

実際にやってみましょう。

<div class="parent">
	<div class="example">
	例文です
	</div>
</div>

.parent {
  text-align: center;
}
.example {
  display: inline-block;
  width: 100px;
  background: orange;
}

↑ クラスが「example」のdivタグをinline-blockに変えています。text-alignは親要素に対して指定するんでしたね。「例文です」という中身の文までセンタリングされてしまっていますが、文は左寄せのままにしたいのであれば.example {text-align:left}を追加します。

縦センタリング（上下中央寄せ）

次に縦方向に真ん中に寄せる方法をパターン別に紹介していきます。初心者誰もが一度は考えるのが「横と同じようにmargin-top:auto; margin-bottom: autoを使えば良さそう」ということ。しかし、この方法は縦の中央寄せでは使えないのです…。
1つずつ詳しく見ていきましょう。

その1：ボックス内の文字を縦中央に寄せる

親要素の中央に文字に配置する（1行の場合）

文が1行におさまる場合は行の高さ＝ボックスの高さとすることで、簡単にボックスの縦中央に文字を配置することができます（行の高さはline-heightで決めることができます：CSSで行高を指定する方法）。
例を見てみましょう。

実際に見てみましょう。

<div class="parent">
	<p>これは例文です</p>
</div>

.parent {
  /*親要素*/
  height: 150px;
  background: orange;
}
.parent p {
  /*上下センタリングするもの*/
  line-height: 150px;
}

↑ heightは親要素（オレンジ部分）に対して指定しています。

文章が2行以上になる場合には使えない

この方法の欠点は文章が2行以上になるとデザインが崩れてしまうことです。「行の高さ＝ボックスの高さ」なのでボックスからはみ出てしまうわけですね。

<div class="parent">
  <p>これは例文です。<br>これは2行目です。</p>
</div>

.parent {
  /*親要素*/
  height: 150px;
  background: orange;
}
.parent p {
  /*上下センタリングするもの*/
  line-height: 150px;
}

↑2行目がボックスからはみ出てしまっているのが分かるかと思います。文が2行以上になる場合には、少し複雑になりますがその2の方法を使いましょう。

その2：absoluteを活用して縦中央に配置

少しだけ複雑ですが、ほとんどのものを中央配置できる便利な方法を紹介します。文が2行以上でも、ブロックの要素でも、インラインの要素でも、擬似要素でも、この方法を使うことができます。

以下のようなCSSを指定すれば、親要素の上下中央に配置されるようになります。

この4つの指定でピッタリ上下中央に配置できます。position: relativeやabsoluteについては、こちらの記事が参考になるはずです。

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

top:50%だけだと、親要素の50%の位置に、子要素の頂点（１番上の角）が来てしまうので、ど真ん中配置になりません。そこでtransform:translateYを使って補正します。こちらは要素を縦方向に移動させるCSS3のプロパティでIE8を除けば基本的に対応しています。IE8のシェアは0.◯%というレベルなので、気にせず使ってしまっても良いでしょう。

例をいくつか紹介します。

例：複数行の文章の場合

<div class="parent">
	<p>1行目です。<br>2行目です。</p>
</div>

.parent {
  /*親要素*/
  position: relative;
  background: orange;
  height: 200px;
}

.parent p {
  position: absolute;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}

例：擬似要素を縦にセンタリング

<div class="parent">
</div>

.parent {
  /*親要素*/
  position: relative;
  background: orange;
  height: 200px;
}

.parent:before {
  position: absolute;
  top: 50%;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);;
  content: 'BOX';
  background: yellow;
}

先程とほとんど変わりませんね。

ど真ん中（中心）に配置する方法

ここまでの解説を応用すれば、簡単に「親要素のど真ん中に配置」することができます。

その1：ボックスをど真ん中に配置

縦のその2の方法で解説したabsoluteとtransform: translateを活用した方法が簡単です。

上の図のように、親要素の上（top）から50%、左（left）から50%の位置に絶対配置します。これだけだと少しズレてしまうのでtranformプロパティーで補正します。

<div class="parent">
	<p>BOX</p>
</div>

.parent {
  /*親要素*/
  position: relative;
  background: orange;
  height: 200px;
}

.parent p {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  width: 100px;
  text-align: center;/*一応BOX内の文字も中央寄せ*/
}

その2：flexboxを使ってど真ん中に配置

flexboxとはざっくりというと「サイズの異なる要素を、柔軟かつ簡単に綺麗に並べてくれるCSS3の機能です。IE9以下だとflexboxに対応していませんが、現在では特に理由がなければ気にせず使ってしまって良いでしょう。
flexboxを使うと、ど真ん中に配置するのも簡単。親要素にdisplay: flexに加えて、justify-content: center、align-items: centerを指定するだけです。

<div class="parent">
  <div class="example">
  例文です
  </div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background: orange;
}
.example {
  display: block;
  width: 100px
  background: #FFF;
}

その3：画像の上に配置したい場合

上と全く同じ方法で画像の上に文字を乗せる、というようなこともできます。コード例は下の記事で解説しています。

画像の上におしゃれに文字やボタンをのせる方法（CSS）

その3：円の中央に文字を配置

line-heightとtext-alignを使って、円の中央に文字を表示させることができます。ただし、文が改行するような場合に使うとデザインが崩れてしまいます。数字などシンプルなものを円で囲いたいときに使うと良いでしょう。

<div class="circle">
	11
</div>

.circle {
  display: inline-block;
  text-align: center;/*左右中央*/
  width: 60px;
  height: 60px;
  line-height: 60px;/*heightと同じ値に*/
  border-radius: 50%;/*角を丸く*/
  background: skyblue;
  color : #FFF;
}

円自体を左右中央に寄せたいときは、親要素に対してtext-align:centerを指定します。

もし文が2行以上になる場合は、以下のようにposition:absoluteとtransform:translateYを使います。

<div class="circle">
	<p>サルワカ<br>saruwakakun</p>
</div>

.circle {
  position: relative;
  text-align: center;
  background: skyblue;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.circle p {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100px;/*上のwidthと合わせる*/
  text-align: center;
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}

↑水色の円は親要素（.circle）で作り、文字をその上に絶対配置しています。

中央寄せができないときの対処法

最後に「中央寄せができない」というときの対処法をまとめておきます。

また、うまくいかないときはブラウザーの検証機能を使って「何が問題になっているか」をチェックするのが効率的です。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方