ZeroPlus Media > Web制作 > HTML/CSS > 【初心者でも簡単】CSSで要素を中央寄せする4つの方法を解説

【初心者でも簡単】CSSで要素を中央寄せする4つの方法を解説

2022/02/19

2023/04/20

「要素を中央に配置したい！」

Webサイトを構築するとき、そのような場面に遭遇することがよくあると思います。この記事では要素を中央寄せする使える際に使えるプロパティを4つ解説します。
要素を真ん中に配置するレイアウトは、デザインの観点からもきれいにみえる配置です。中央寄せするプロパティを学習して、実践で活用していきましょう。

CSSで中央に寄せることができるプロパティ4選

text-align
margin
flex
position

この記事で身につく内容

要素を中央寄せする方法

「要素を右寄せする方法」については下記記事をご参照ください。

【初心者でも簡単】CSSで要素を右寄せする6つの方法を解説

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

CSSで中央寄せする方法をご紹介
まとめ

CSSで中央寄せする方法をご紹介

CSSで中央寄せする場合、下記プロパティで中央寄せできます。

text-align
flexboxとmarginの組み合わせ
margin
position

ここから一つずつ解説していきます。

【text-align】プロパティで左右中央寄せする方法

text-alignプロパティで要素を左右中央寄せすることができます。

text-alignでブロック要素などの水平方向に対して配置を決めることができます。

例えばHTMLに以下のような記述があるとします。

<div class="parent">
  <span>インライン要素を中央に寄せます</span>
</div>
<div class="parent">
  <p>ブロック要素を中央に寄せます</p>
</div>

出力結果

インライン要素を中央に寄せます

ブロック要素を中央に寄せます

インライン要素の例としてspanタグを、ブロック要素の例としてpタグを使用します。スタイルを適用していない状態だと「左上」に出力されます。このHTMLにCSSで以下のスタイルを適用します。
parentクラスには要素の幅をイメージしやすいように枠線の色を赤にするスタイルを適用させます。

.parent {
  width: 100%;
  border: 1px solid red;
  text-align: center;
}

出力結果

インライン要素を中央に寄せます

ブロック要素を中央に寄せます

spanタグ、pタグの親要素のparentクラスに対してtext-align: center;を適用しています。これで中央に寄せることができました。

【flexbox】プロパティで左右中央寄せ

flexboxプロパティのひとつに、justify-contentがあります。

justify-contentは水平方向に対して揃え位置を指定することができます。左右中央に配置する場合はcenterを適用します。

.parent {
  border: 1px solid red;
  display: flex;
  justify-content: center;
}

出力結果

インライン要素を中央に寄せます

ブロック要素を中央に寄せます

【flexboxとmargin】プロパティで左右中央寄せ

flexboxとmarginプロパティを組み合わせて中央寄せすることもできます。中央に寄せたい要素の「親要素」にdisplay: flex;を適用し、中央に寄せたい要素にmargin: auto;を適用します。

.parent {
  border: 1px solid red;
  display: flex;
}
span {
  margin: auto;
}
p {
  margin: auto;
}

出力結果

インライン要素を中央に寄せます

ブロック要素を中央に寄せます

【margin】プロパティで左右中央寄せ

marginプロパティのみで中央寄せをすることもできます。

例えば親要素の幅を50%に指定してmargin-right: auto;とmargin-left: auto;を指定することで、要素を左右中央寄せすることができます。

.parent {
  border: 1px solid red;
  width: 50%;
  margin-right: auto;
  margin-left: auto;
}

出力結果

インライン要素を中央に寄せます

ブロック要素を中央に寄せます

margin-right: auto;とmargin-left: auto;の代わりにmargin: auto;でも中央寄せすることができます。なお上記の場合、text-align: center;を適用すればテキスト部分を中央寄せすることができます。

【postion】プロパティで中央寄せ

position は、top, left, right, bottomで最終的な位置を指定することができます。寄せたい要素（子要素）にposition: absolute;と最終的な位置（例:right, topなど）、その親要素にposition: relative;を適用させて使用します。

<div class="parent-inline">
  <span>インライン要素を中央に寄せます</span>
</div>
<div class="parent-block">
  <p>ブロック要素を中央に寄せます</p>
</div>

.parent-inline {
  position: relative;
  height: 100px;
  border: 1px solid red;
}

.parent-block {
  position: relative;
  height: 100px;
  border: 1px solid red;
}

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

出力結果

インライン要素を中央に寄せます

ブロック要素を中央に寄せます

transformプロパティと組み合わせて中央寄せすることができました。

CSSで上下中央寄せする方法

CSSでは左右に中央寄せできるだけではなく、上下にも中央寄せすることができます。

上下中央寄せする場合は下記のようなコードになります。

<div class="parent">
  <span>インライン要素を中央に寄せます</span>
</div>
<div class="parent">
  <p>ブロック要素を中央に寄せます</p>
</div>

.parent {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent span {
  margin-top: 20px;
  margin-bottom: 20px;
}

出力結果

spanタグには上下中央に配置されているのを分かりやすくするために余白を設けています。align-itemsは垂直方向に対して揃え位置を指定することができます。上下中央に配置する場合はcenterを適用します。

画像を上下中央寄せする方法

画像を中央寄せする場合は次のようになります。

<div class="parent-block">
  <img src="dummy.png" alt="">
</div>

img {
  width: 100%;
  max-width: 350px;

}

.parent-block {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}

出力結果