【9月枠も残りわずか】転職保証コース

【今知っておきたい!】CSSで中央寄せにする方法とコードの書き方

CSSで中央寄せにする方法はたくさんあることを知っているけれど、どれを使っていいかわからない……
そんな悩みを抱えていませんか?

この記事では、要素別・中央寄せの方法別にCSSで中央寄せにする方法を解説していきたいと思います。

CSSで中央寄せにする方法

CSSで中央寄せにするときに使うものには、様々な種類があります。
使い分ける上で必要になる考え方があります。
それは中央寄せにしたい要素の種類は何か、中央寄せにしたい方向は何かの2つです。

 

要素の種類については下を参考にしてください。

 

インライン要素とブロック要素って何?
インライン要素
▶︎「ブロック要素」と違って横いっぱいに広がらず、見えている部分だけ幅があります。
そのため短いテキストの場合は横につながっていきます。

ブロック要素

▶︎「ブロック要素」は前後に改行が入る要素です。
実際に見えている部分だけでなく、横いっぱいに広がっているイメージです。
そのため、改行をしなくてもどんどん下につながっていきます。

 

例えばどんなものがあるのかは、下の図を参考にしてみてください。

 

写真の<img>タグは、インライン要素です。

 

そして、中央寄せにする時は、「水平方向に中央寄せしたいとき」「垂直方向に中央寄せしたいとき」「上下左右で中央寄せしたいとき」の3パターンがあります。

自分がどの方向に中央寄せしたいのかわかっている方は、下にある「こちら!」から移動してみてください。

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

 

中央寄せにしたい方は、これらの中央寄せにしたい要素の種類は何か、中央寄せにしたい方向は何かの2つを考えてから、中央寄せにする方法を選ぶようにしてください。

 

今回は以下のコードを基本に解説していきます。
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を書くようにしましょう。

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

 

10月枠も残りわずか!!

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

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

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

 

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

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