Skip to content

左右中央配置の使い分け

要素を左右中央に配置したい時、どのプロパティを使えばいいのか？がわかるようになるための違い解説です。

display: flex; と justify-content: center;

  • 中央寄せしたい要素の 親要素 に指定します（最重要）
  • 複数の要素を真ん中に寄せる時に使えます

See the Pen 【サンプル】flex-center by tkm1695 (@tkm1695) on CodePen. 

<div class="flex">
  <div class="flex-item">子要素</div>
  <div class="flex-item">子要素</div>
</div>

.flex {
  display: flex;
  justify-content: center;
}
.flex-item {
  width: 30%;
}

margin: 0 auto;

  • 中央寄せしたい要素 そのもの に指定します。
  • 横幅が固定値(px)の時に使えます。逆に言えば、横幅指定しないと効かないので注意。
  • ひとつの要素を真ん中に寄せたい時に使います

See the Pen 【サンプル】flex-center by tkm1695 (@tkm1695) on CodePen. 

<div class="container">
  （コンテンツ内容）
</div>

.container {
  max-width: 1200px;
  margin: 0 auto;
}

text-align: center;

基本的にテキストを中央寄せする時に使います。

See the Pen 【サンプル】text-center by tkm1695 (@tkm1695) on CodePen. 

<p class="text-center">テキストテキストテキストテキスト<br>テキストテキストテキストテキスト</p>

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

さらなる解説

テキスト以外であっても、インライン要素であれば中央寄せにすることができます。

Point

左右中央配置させる方法は様々あり、唯一の答えがあるわけではありません。
状況によって最適解はあるかもしれませんが、はじめから最適解にたどり着くのは至難の業なので
まずは試行錯誤してプロパティの違いを手を動かしながら確かめてみましょう。