CSSで中央寄せに!【パターン別要素をセンタリングする方法】 | プログラミング入門ならWEBCAMP NAVI
【12月枠も残りわずか】転職保証コース

CSSで中央寄せに!【パターン別要素をセンタリングする方法】

「画像を左右中央に寄せたい!」「この中で文字を中央に寄せるには?」
このようにHTMLやCSSを使っている中で、中央寄せを使うことは頻繁にあります。

しかし、CSSで中央寄せにする方法はたくさんあり、場面や中央寄せにしたい要素によって使う方法が異ってきます。
そのため、CSSで中央寄せにする方法は難しく感じられ、曖昧なままにしてしまいがちです。

今回はそんな「中央寄せが効かない」「どこに設定していいかわからない」といった曖昧さを一緒に解決していきましょう。

CSSで中央寄せにする方法

中央寄せにする方法の選び方

CSSで中央寄せにするときに使うものには、様々な種類があります。
その種類を使い分けるステップを確認していきましょう。

使い分けるためのステップは①要素の種類を確認する 中央寄せにしたい方向を確認するの2つです。

STEP.1
要素の種類を確認しよう

まずはじめに、中央寄せにしたい要素が何か確認しましょう。
中央寄せにしたい要素が、どの種類かわからない方はこの記事を読んでみてください。

【css display】曖昧になりがちな使い方を徹底解説!
STEP.2
中央寄せの方向を確認しよう

次に、どのように中央寄せにしたいかを考えてみましょう。
中央寄せを分類する者には、3つのパターンがあります。

中央寄せのパターン
  • 水平方向に中央寄せにしたいとき
  • 垂直方向に中央寄せしたいとき
  • 上下左右で中央寄せしたいとき

特定のパターンだけについて知りたい方は、下にある「こちら!」から移動してみてください。

知りたい項目だけ読みたい方はこちら
水平方向に中央寄せにしたい方はこちら!
垂直方向に中央寄せにしたい方はこちら!
上下左右で中央寄せにしたい方はこちら!

このように中央寄せにしたいときは、中央寄せにしたい要素の種類は何か」「中央寄せにしたい方向は何か」の2つを考えるところから始めることを癖にしてしまいましょう。

解説に使うHTMLとCSSのコード

今回は以下のコードを基本に解説していきます。
HTMLには変更が加えられないので、CSSだけ随時解説していきたいと思います。

HTML
<!DOCTYPE html>
<html>
<head>
    <title>例</title>
    <link rel="stylesheet" href="example.css">
</head>
    <div class="box">
        <p class="text-box">
             <span>これが基本のテキストです。</span>
 	</p>
    </div>
</html>
example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px;
  background-color: #174a5c;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
}

上記のコードの結果として以下の画面が表示されます。

水平方向(横向き)に中央寄せにする

水平方向(横向き)に中央寄せする方法を、要素にわけて解説していきます。

インライン要素

text-align: center;を使う方法

インライン要素に水平方向の中央寄せを行いたいときは、text-align: center;を使います。

気をつけること
text-align: center;」を……
指定する ▶︎親となるブロック要素
適用される▶︎ブロック要素に含まれるテキストなど
指定する要素と、指定は反映される要素が異なることに気をつけてください。

実際のコードと反映結果は以下の通りです。

example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px;
  background-color: #174a5c;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
  text-align: center;
}

文字が真ん中に動いていることがわかりますね。

ブロック要素

ブロック要素を中央寄せするための方法を解説します。

margin: 値 auto;を使用する方法

ブロック要素にmargin: 値 auto;を使用する方法です。
左右のmarginをautoに設定することで、左右の余白を統一できるため結果的に中央寄せにすることができます。
この時左右のmarginをautoにしていれば、上下の値は何になっても構いません。

実際のコードは下記の通りです。

example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px;
  background-color: #174a5c;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}

垂直方向(縦向き)に中央寄せにする

垂直方向(縦向き)に中央寄せする方法を、要素にわけて解説していきます。

インライン要素

「テキストの行の高さ」=「親要素の高さ」になるようにする方法

インライン要素の中でも、”1行のテキスト”を垂直方向の中央寄せにする方法は簡単です。
方法は、「そのテキストの行の高さ」と「親要素の高さ」を同じ値に指定することです。

実際のコードは以下の通りです。

example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px
  background-color: #174a5c;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
}
span {
  line-height: 500px;
}

vertical-align:center;を使う方法

また、vertical-align:center;を使うことで中央寄せにする方法もあります。
vertical-alignはテーブルセルの中で縦方向の揃え位置を指定できます。
中央寄せしたいインライン要素を含む親要素に対してdisplay: table-cell・vertical-align:center;の指定を加えます。

実際のコードは以下の通りです。

example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px;
  background-color: #174a5c;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
  display: table-cell;
  vertical-align: middle;
}

ブロック要素

ブロック要素のみにしか使うことのできない方法はないため、次の「共通」をみてください。

共通

ほとんどの要素に対して使うことのできる垂直方向に中央寄せする方法を解説していきます。

positionを使う方法

1つ目は、position: absolute;を使う方法です。

positionは何を指定できるの?
positionは、要素のポジショニングの方法を決めるはたらきを持っています。
位置を決めるためには
①値で基準を決める ②数字を使って具体的な位置を決める
の2つが必要になります。

基準を決めるpositionの値
position:relative;
▶︎relativeとは、相対位置のことを指します。
本来表示されるべきな位置から相対的に見た位置の表示方法です。
position:absolute;
▶︎absoluteとは、絶対位置のことを指します。
親要素のひだり左上の端を始まりとして数字で指定する表示方法です。

positionを使ったコードと反映結果は以下の通りです。

example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px;
  background-color: #174a5c;
  position: relative;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
          transform: translateY(-50%);
}

ここで出てきたtransformについても見ておきましょう。

transformは何を指定できるの?
transformを使うと、「回転」「移動」「伸縮」「傾斜」という4つの効果を加えることができます。
今回用いるのは、「移動」です。
「移動」の時は「transform: translate(数値)」で指定することができます。
詳しく知りたい!という方はこのページを見てください。

出てきたプロパティがすべて分かった上で、今回のコードについて見ていきましょう。

まず、親要素を相対位置、子要素を絶対位置に指定します。
topを50%に指定することで、子要素の始まりを親要素の中央にします。
このままだと中央から始まるだけで、中央寄せにはなっていません。
そこで「transform: translateY(-50)」を指定することで、子要素の半分だけ上に戻します。
こうすることで、中央寄せにすることができます。

上下左右で中央寄せにする

上下左右で中央寄せにする、つまり”ど真ん中”にする方法について解説していきます。

インライン要素

vertical-align: middle;とtext-align: center;を使う方法

ブロック要素の中身が、ブロック要素の高さよりも低い場合は、vertical-alignを使うことができます。

これはテーブルセルの中で使えるため、まず中央寄せしたいインライン要素を含む親要素に対してdisplay: table-cell・vertical-align:center;の指定を加えます。

その後に自分が中央寄せしたい要素に対してvertical-align: middle;text-align: centerを指定するだけです。

実際のコードは以下の通りです。

example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px;
  background-color: #174a5c;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

ブロック要素

ブロック要素を上下左右で中央寄せにする方法を解説します。

display: flex;を使う方法

display: flex;は、要素に指定することで、そのすぐ下にある要素が並列になるというはたらきがあります。

本来なら複数の要素を並べるために使いますが、親要素に下記のコードを書き加えることで、上下左右の中央寄せにすることができます。

example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px;
  background-color: #174a5c;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
}

positionとmarginを使う方法

絶対配置している要素では、高さと左右がauto以外・marginの左右がautoという条件が揃った時、左右のmarginは等しくなり、そのために中央寄せになります。

同じことが左右だけではなく、上下でも起こるため、上下左右の中央寄せにすることができます。

実際のコードは以下の通りです。

example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px;
  background-color: #174a5c;
  position: relative;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

transformを使う方法

これは絶対配置している要素を上から50%・左から50%ずらしてから要素の半分の大きさずつ戻していくことで、中央寄せにしています。

実際のコードは以下の通りです。

example.css
* {
  margin:0; padding:0;
}
.box {
  height: 600px;
  width: 600px;
  background-color: #174a5c;
  position: relative;
}
.text-box {
  background-color: #337079;
  color: white;
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
        -o-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}

反応しない時に確認したいこと

中央寄せにしたいものの要素を確認する

うまくいかない時に、まず確認していただきたいのは「中央寄せにしたいものの要素は何か?」ということです。

解説にあった通り、インライン要素にしか効かないものもあれば、ブロック要素にしか使うことができないものもあります。

ブロック要素の中にあるテキスト・画像なのか、それともブロック要素自体なのか、自分の中央寄せにしたいものがどんな要素なのかを確認してからどれを使うかを決めることにしてください。

繰り返しにはなりますが、大切なのは「中央寄せにしたい要素は何か?」「中央寄せにしたい方向は何か?」を理解しておくことです。

CSSで中央寄せにする方法まとめ

CSSで中央寄せにする方法は何通りにもあります。
自分が中央寄せにしたいと思っている要素の特徴や、中央寄せにしたい方向を理解した上でCSSを書くようにしましょう。

何と言っても書いてみることが一番であることは変わりがないので、なんども書いて試して見てください!

 

12月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きプログラミングスクール

で未経験からエンジニア目指そう

 

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある

 

転職保証コースは質の高いカリキュラムで転職成功率98%