などの疑問や悩みを解決してまいります。
Webページを作成する上で基本中の基本である中央配置ですが、初心者がうまくできず挫折してしまうポイントでもあります。
とはいえ基本なだけに避けて通ることはできません。
今回は初心者の方に向けてわかりやすく理解できるように中央寄せについて解説していきたいと思います。
widthプロパティとmarginプロパティを指定して左右中央配置
widthプロパティとmarginプロパティを使用して左右中央配置するのは基本中の基本です。
今回はcontainerクラスに対し、widthプロパティに1000pxを指定して、横幅1000pxのコンテンツを左右中央配置に設定します。
最初に完成例の画像と、HTMLとCSSのコードを載せます。
<body>
<div class="container"><!-- 中央寄せしたいブロック -->
<p class="txt">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミー
</p>
<p class="txt">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミー
</p>
</div><!-- 中央寄せしたいブロックここまで -->
</body>HTMLは、中央寄せしたいコンテンツにクラス「.container」を指定しています。
/* リセットCSS */
body,div,p {
margin: 0;
padding: 0;
}
/* 結果を視認しやすくするためのCSS */
body {
background-color: #ccc;
}
/* 中央寄せしたいコンテンツブロック */
.container {
/* 結果を視認しやすくするためのCSS */
border: 1px solid #222;
background-color: #fff;
padding: 30px;
box-sizing: border-box;
/* ここまで */
/* 【重要！】中央寄せのCSS */
width: 1000px;
margin: 0 auto;
/* ここまで */
}CSSはいろいろ記述していますが、/* 【重要！】中央寄せのCSS */の箇所以外はお好みでOKです。
注目してほしい箇所は以下です。
/* 中央寄せしたいコンテンツブロック */
.container {
/* 【重要！】中央寄せのCSS */
width: 1000px;
margin: 0 auto;
/* ここまで */
}こちらのコードを解説していきます。
まずwidthプロパティに1000pxを指定して、横幅1000pxのコンテンツブロックを作成します。
そのコンテンツブロックを左右中央寄せにするためにmarginプロパティの左右に対しautoを指定しています。
autoを指定することで、左右の余白が自動調節され指定したコンテンツを中央寄せさせることができます。
上記2つのプロパティの1つが抜けると中央配置ができなくなります。その理由を解説します。
widthプロパティがないと左右中央配置できない理由
widthプロパティとmarginプロパティを使用して左右中央配置する条件の１つとして、表示領域よりもコンテンツの横幅が小さくなくてはいけません。
完成例の表示領域幅は1920pxです。
これに対し、コンテンツ幅は1000pxなので右余白に920pxが空いている状態になります。
右余白に空きがあることで左右中央配置にすることができるということです。
話を戻しますが、widthプロパティがないと機能しない理由としまして、widthプロパティがない場合は.containerクラスは横幅一杯に広がり、右余白がなくなってしまうため左右中央配置ができなくなってしまうからです。
以下がwidthプロパティを指定していない状態の結果です。
/* 中央寄せしたいコンテンツブロック */
.container {
/* widthプロパティなどで右余白を作らないと左右中央配置できない */
margin: 0 auto;
/* ここまで */
}このようにcontainerクラスはブロックレベル要素であるため、その特性上横幅いっぱいにその要素の横幅は広がります。
なので左右中央寄せするためにはwidthプロパティで表示領域よりも低い数値を指定して右余白を作ることで左右中央配置が可能となります。
marginプロパティがないと左右中央配置できない理由
まずmarginプロパティを指定しないとどのような結果になるのかを見てみましょう。
/* 中央寄せしたいコンテンツブロック */
.container {
/* marginプロパティを指定しないと左右中央配置にならない */
width: 1000px;
/* ここまで */
}上記のようにmarginプロパティを指定していないと左上配置となります。
通常HTMLで記述したコンテンツは基本的に左上から順に配置されていきます。
完成例にはmargin: 0 auto;を指定していますが、左右の値をautoにすることで左右の余白を自動調節してコンテンツを左右中央に配置しています。
なのでwidthプロパティとmarginプロパティで左右中央配置する条件として、左右中央配置するために右に余白があるかどうか、そして右余白を使って左右中央配置を実現しているということです。
ポイント
〇 widthプロパティで表示領域よりも低い横幅を指定する
〇 marginプロパティの左右に対しautoを指定することで、コンテンツ幅 ＜ 表示領域の場合左右中央に配置することができる
レスポンシブにも対応しよう
これまでコンテンツ幅1000pxの要素を左右中央配置で表示させましたが、当然ながらこのままでは表示領域（デバイス幅）が1000px未満だと、右側に見切れる状態になってしまいます。
なのでコンテンツ幅は1000pxのままにして、表示領域が1000px以下になった場合でも見切れることなく表示できるようにします。
以下コードを見てください。
<body>
<div class="container"><!-- 中央寄せしたいブロック -->
<p class="txt_bold">
レスポンシブ対応していないコンテンツブロック
</p>
<p class="txt">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p><!-- /.txt -->
</div><!-- 中央寄せしたいブロックここまで -->
<div class="sub_container"><!-- レスポンシブ対応したブロック -->
<p class="txt_bold">
レスポンシブ対応しているコンテンツブロック
</p>
<p class="txt">
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</p><!-- /.txt -->
</div><!-- レスポンシブ対応したブロックここまで -->
</body>HTMLでは理解しやすいようにレスポンシブ対応がされていないコンテンツcontainerクラスと、レスポンシブ対応がされているコンテンツsub_containerクラスを用意しました。
/* リセットCSS */
html,body,div,p {
margin: 0;
padding: 0;
overflow: hidden;
}
/* 結果を視認しやすくするためのCSS */
body {
background-color: #ccc;
padding: 0 20px;
}
.txt_bold {
font-size: 20px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
/* ここまで */
/* 中央寄せしたいコンテンツブロック */
.container {
/* 結果を視認しやすくするためのCSS */
border: 1px solid #222;
background-color: #fff;
padding: 30px;
box-sizing: border-box;
margin-bottom: 30px!important;
/* ここまで */
/* 【重要！】中央寄せのCSS */
width: 1000px;
margin: 0 auto;
/* ここまで */
}
.sub_container {
/* 結果を視認しやすくするためのCSS */
border: 1px solid #222;
background-color: #ffbcbc;
padding: 30px;
box-sizing: border-box;
/* ここまで */
/* 【重要！】中央寄せのCSS + レスポンシブ対応 */
width: 100%;
max-width: 1000px;
margin: 0 auto;
/* ここまで */
}今回注目してほしいCSSは/* 【重要！】中央寄せのCSS + レスポンシブ対応 */の箇所です。
.sub_container {
/* 結果を視認しやすくするためのCSS */
border: 1px solid #222;
background-color: #ffbcbc;
padding: 30px;
box-sizing: border-box;
/* ここまで */
/* 【重要！】中央寄せのCSS + レスポンシブ対応 */
width: 100%;
max-width: 1000px;
margin: 0 auto;
/* ここまで */
}レスポンシブされていないコードと比較してみましょう。
まず違う点として、widthプロパティの値が違いますね。
非対応の方はwidth1000px、対応されている方は100％となっています。
100％と可変単位とすることで、画面幅に応じて常に100％幅を保ってくれるようになります。
そして新たにmax-widthプロパティが追加されています。
max-widthプロパティは指定したコンテンツの最大幅を指定するプロパティです。
max-width - CSS: カスケーディングスタイルシート | MDN
こちらの値には1000pxを指定してコンテンツ幅が1000px以上にならないように設定しています。
この２つのプロパティを組み合わせることで、画面幅が1000px以上の場合はsub_containerクラスは最大幅1000pxとなり、画面幅が1000px以下になると、画面幅に応じて幅が縮小されていきます。
実際にどのような動きになるか見てみましょう。
上がレスポンシブ非対応のコンテンツブロック、下がレスポンシブ対応のコンテンツブロックです。
このようにレスポンシブ非対応のコンテンツブロックは横幅が1000pxと固定値なので、表示領域（デバイス幅）が1000px以下となると、右側に見切れた状態になるのに対し、下のレスポンシブ対応のコンテンツボックスは表示領域（デバイス幅）に応じて画面幅が縮小されているのがわかります。
以上がwidthプロパティ、marginプロパティを指定した場合の左右中央配置についての説明です。
display: flex;を指定して上下左右中央配置
次はdisplay: flex;を指定して、上下左右中央配置する方法を解説していきます。
基本display: flex;は指定した要素の子要素を横並びにするためによく使われますが、コンテンツを上下左右中央配置することも可能です。
最初に完成例の画像と、HTMLとCSSのコードを載せます。
<body>
<div class="container">
<div class="box_center_01">
<div class="box_center_02">
<div class="box_center_03">
display: flex;で<br>上下左右中央配置にします。
</div>
</div>
</div>
</div>
</body>/* リセットCSS */
html,body,div,p {
margin: 0;
padding: 0;
}
/* ここまで */
body {
background-color: #ccc;
/* 【重要！】左右中央配置のCSS */
display: flex;
justify-content: center;
/* ここまで */
}
.box_center_01 {
/* ボックスのレイアウト */
border: 1px solid #222;
background-color: #fd9595;
padding: 30px;
box-sizing: border-box;
width: 500px;
height: 500px;
/* ここまで */
/* 【重要！】上下左右中央配置のCSS */
display: flex;
justify-content: center;
align-items: center;
/* ここまで */
}
.box_center_02 {
/* ボックスのレイアウト */
border: 1px solid #222;
background-color: #fffc59;
padding: 30px;
box-sizing: border-box;
width: 400px;
height: 400px;
/* ここまで */
/* 【重要！】上下左右中央配置のCSS */
display: flex;
justify-content: center;
align-items: center;
/* ここまで */
}
.box_center_03 {
/* ボックスのレイアウト */
border: 1px solid #222;
background-color: #82d7fc;
padding: 30px;
box-sizing: border-box;
width: 300px;
height: 300px;
/* ここまで */
/* 【重要！】上下左右中央配置のCSS */
display: flex;
justify-content: center;
align-items: center;
/* ここまで */
}それでは先にCSSから解説していきます。
display: flex;を指定して上下左右中央配置にしているCSSは以下です。
/* 【重要！】上下左右中央配置のCSS */
display: flex;
justify-content: center;
align-items: center;
/* ここまで */display: flex;は子要素が複数ある場合は横並びになりますが、１つだけだと特に何も変化はありません。
上下もしくは左右、上下左右中央配置をするために定義するような考えでOKです。
justify-content: center;は、指定した子要素を親要素の左右中央寄せにしてくれます。
justify-content - CSS: カスケーディングスタイルシート | MDN
コードで見ると以下の箇所です。
body {
/* 【重要！】上下左右中央配置のCSS */
display: flex;
justify-content: center; /* ここです */
align-items: center;
/* ここまで */
}align-items: center;は、指定した子要素を親要素の上下中央配置にしてくれます。
コードで見ると以下の箇所です。
body {
/* 【重要！】上下左右中央配置のCSS */
display: flex;
justify-content: center;
align-items: center; /* ここです */
/* ここまで */
}align-items - CSS: カスケーディングスタイルシート | MDN
上下もしくは左右、上下左右中央配置したい要素の親要素に指定
HTMLを見てみましょう。
<body>
<div class="container">
<div class="box_center_01">
<div class="box_center_02">
<div class="box_center_03">
display: flex;で<br>上下左右中央配置にします。
</div>
</div>
</div>
</div>
</body>上記コードも見ながら説明すると、指定箇所は上下もしくは左右、上下左右中央配置したい要素の親要素に指定します。
つまりcontainerクラスを上下左右中央にしたい場合は、親要素のbody要素に指定します。
box_center_01クラスを上下左右中央にする場合は、親要素のcontainerクラスに指定します。
この要領で上下左右中央配置に指定要素の親要素に上下もしくは左右、上下左右中央配置したい要素の親要素にCSSを指定します。
ポイント
上下左右中央配置に指定要素の親要素に上下もしくは左右、上下左右中央配置したい要素の親要素にCSSを指定
positionプロパティを指定して上下左右中央配置
position:プロパティを指定して要素の位置を指定することがあるでしょう。
その場合、positionプロパティで上下左右中央配置する指定方法があります。
完成例を見てみましょう。
このようにピンクボックスの中の黄色ボックスを上下中央配置に表示しています。
コードは以下になります。
<body>
<div class="container">
<div class="box_center_01">
<div class="box_center_02">
positionプロパティで<br>上下左右中央配置にします。
</div>
</div>
</div>
</body>/* リセットCSS */
html,body,div,p {
margin: 0;
padding: 0;
}
/* ここまで */
.box_center_01 {
/* ボックスのレイアウト */
position: relative;
border: 1px solid #222;
background-color: #fd9595;
box-sizing: border-box;
width: 800px;
height: 500px;
/* ここまで */
}
.box_center_02 {
/* ボックスのレイアウト */
border: 1px solid #222;
background-color: #fffc59;
padding: 30px;
box-sizing: border-box;
width: 400px;
height: 400px;
/* ここまで */
/* 【重要！】上下左右中央配置のCSS */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* ここまで */
}今回注目すべきコードは以下です。
/* 【重要！】上下左右中央配置のCSS */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* ここまで */まず配置の基準としたい親要素にposition: relative;を指定します。
今回で言いますと、ピンクボックスが配置の基準となりますので、box_center_01クラスに指定します。
そして子要素である黄色ボックスのbox_center_02クラスにはposition: absolute;を指定します。
ここまでで黄色ボックスはピンクボックスに重なり、位置指定をしていない状態なので上と左にピッタリくっついている場所に位置します。
top: 50%;、left: 50%;だけでは上下左右中央配置にならない理由
ここからtop、left、bottom、rightプロパティを使用して位置を決めていきます。
上下左右中央配置にするには単純に50%の値を指定したらいいと思うかもしれません。
しかしこれではうまくいきません。
試しに子要素の黄色ボックスにtop: 50%;とleft: 50%;を指定してみます。
このように右下の方にずれてしまいます。
なぜtop: 50%;とleft: 50%;を図を見ながら理解していきましょう。
top: 50%;とは基準となる親要素の上から50%（半分）の位置に移動するということです。
つまり黄色ボックスの要素の上がピンクボックスの上から50%の位置にぴったり合う状態になります。
left: 50%;とは基準となる親要素の左から50%（半分）の位置に移動するということです。
つまり黄色ボックスの要素の左がピンクボックスの左から50%の位置にぴったり合う状態になります。
これらが理由のためtop: 50%;、left: 50%;だけでは上下左右中央配置にならないということです。
中央寄せを実現するtransform: translate(x, y);
上下、左右に中央配置する場合はtransformプロパティにtranslate関数を使用します。
translate() - CSS: カスケーディングスタイルシート | MDN
値はx、y値の両方に-50%を指定します。
これで上下左右中央配置が実現するのですが、なぜこれで実現するのかさっぱりな方もいると思うので説明していきます。
translate関数は、top、left、bottom、rightで移動した要素をさらに移動させることができます。
まずはxの値にのみ-50%を指定します。
/* 【重要！】左右中央配置のCSS */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,0);
/* ここまで */すると結果は以下のようになります。
このように左右中央に配置されたことがわかるかと思います。
わかりやすくするとこのような感じになります。
最初はleft: 50%;を指定したことで、ピンクボックスの半分の位置に黄色ボックスの左側に合わせるように移動させました。
transform: translate(-50%, 0);を指定したことで、-50%は負の値なので逆方向に移動します。
そして黄色ボックスの大きさの50%移動します。
これにより黄色ボックスを左右中央に配置することができるのです。
ポイント
〇 top、left、bottom、rightで50%を指定すると、親要素の半分の位置に子要素のブロックの端が合わさるように移動する
〇 translate関数に50%を指定すると、指定した要素のサイズの50%移動する
これであとは上下中央にするだけです。
上下中央にする場合はtranslate(-50%, 0)の0の値を-50%にするだけです。
/* 【重要！】上下左右中央配置のCSS */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* ここまで */上下中央になる原理は先程と同じです。
中央寄せまとめ（説明不要で知りたい場合はココ！）
今回3種類の中央寄せの方法をまとめました。
おさらいしましょう。
widthプロパティとmarginプロパティで中央寄せ
/* 中央寄せしたいコンテンツブロック */
.container {
/* 【重要！】中央寄せのCSS */
width: 1000px;
margin: 0 auto;
/* ここまで */
} /* 【重要！】中央寄せのCSS + レスポンシブ対応 */
width: 100%;
max-width: 1000px;
margin: 0 auto;
/* ここまで */ポイント
〇 中央寄せしたい要素に幅指定と、marginプロパティに左右autoを指定
〇 レスポンシブ対応の場合はwidthプロパティは100％、max-widthプロパティに幅指定をする
〇 marginプロパティは{上の値 右の値 下の値 左の値}、{上下の値 左右の値}、{上の値 左右の値 下の値}というようにまとめて指定することができる
display:flex;を指定して中央寄せ
/* 【重要！】上下左右中央配置のCSS */
display: flex;
justify-content: center;
align-items: center;
/* ここまで */ /* 【重要！】左右中央配置のCSS */
display: flex;
justify-content: center;
/* ここまで */ポイント
〇 上下、左右、上下左右中央寄せにしたい要素の親要素に指定する
〇 justify-content: center;は左右中央寄せで使用
〇 align-items: center;は上下中央寄せで使用
positionプロパティで中央寄せ
/* 【重要！】上下左右中央配置のCSS */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* ここまで */ /* 【重要！】上下中央配置のCSS */
position: absolute;
top: 50%;
left: 0;
transform: translate(0,-50%);
/* ここまで */ /* 【重要！】左右中央配置のCSS */
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
/* ここまで */ポイント
〇 上下中央指定の場合はtopプロパティの値に50%を指定し、translate関数の第1引数に0、第2引数に-50%を指定（translateY関数に-50%指定でも可）
〇 左右中央指定の場合はleftプロパティの値に50%を指定し、translate関数の第1引数に-50%、第2引数に0を指定（translateX関数に-50%指定でも可）
〇 上下左右中央指定の場合はtopプロパティとleftプロパティの値に50%を指定し、translate関数の第1引数と第2引数に-50%を指定
