【CSS】margin？position？要素の中央寄せで使うプロパティとは？

CSS

要素が中央寄せにならなくて困ってます…。

今回はこんなお悩みに答えていきます。

本記事の内容

水平方向、垂直方向の中央寄せのやり方

本記事を対象とする方

フロントエンドエンジニアを目指す方
Webデザイナーを目指す方

この記事を書いている僕はプログラミング歴2年5ヶ月です。webエンジニアとして”社内転職”に成功しました。

水平方向の中央寄せ

まずは水平方向の中央寄せについて考察しましょう。水平なので横(X)方向ですね。

文字を手っ取り早く中央寄せにするのであれば、text-align: center;が有効です。


      
        div {
          text-align: center;
        }

ただし、折り返しが発生するとまた中央から始まります。基本的に文章は左から右、上から下に流れて読まれていくので、中央寄せは読みづらくなります。

今度は文字の中央寄せではなく、ブロックの中央寄せを考えてみましょう。親要素と子要素の関係をブロックとして捉えると、子要素の幅が親要素の100%未満の場合、margin-right:auto;、margin-left:auto;で子要素を中央寄せにすることができます。


      
        #parent {
          width: 100vw;
        }
        #child {
          margin-right: auto;
          margin-left: auto; 
          width: 500px;
        }

ただし、子要素が複数ある場合、一つ一つの子要素にmargin-right:auto; margin-left:auto;を設定するので面倒かつ柔軟性低いです。また、inline要素はblock要素に変換しないといけません。

そこで親要素にdisplay: flex;、align-items: center;、flex-direction: column;を設定します。そうすると、全ての子要素が中央に配置されます。子要素には何の設定も要りませんし、block要素かinline要素かは関係ありません。

子要素の幅が親要素の100%未満の場合、もう一つ有効な設定がleft: 50%; transform: translateX(-50%);です。この設定が有効なのは何らかのpositionプロパティが設定されている時です。

親要素にposition: relative;、子要素にposition: absolute;が設定されているのはよく使われます。主に擬似要素によく使われる印象ですね。当然ながら子要素の幅が親要素をはみ出す場合は適用されません。


      
        #parent {
          position: relative;
        }
        #child {
          left: 50%;
          position: absolute;
          transform: translateX(-50%);
          width: 60%;
        }

子要素にポジションプロパティを設定 — ※全てのポジションプロパティに有効なわけではありません

left: 50%;で親要素の左端を起点に50%(半分)移動します。その次にtransform: translateX(-50%);で子要素のwidthの50%(半分)をマイナス方向に移動させます。これにより左右の中央寄せを実現できます。

垂直方向の中央寄せ

続いて垂直方向の中央寄せについて考察しましょう。垂直なので縦(Y)方向になります。

文字の高さを手っ取り早く寄せるのであれば、line-heightを要素の高さと合わせるのが有効です。例えば要素が500pxの高さを持っている場合、line-height: 500px;とすると垂直に中央寄せになります。


      
        div {
          height: 500px;
          line-height: 500px;
        }

しかし、これは要素の高さがauto設定になっていると使えないので、使い道は少ないです。

水平方向の中央寄せで、要素の左右のmarginをautoにする方法を紹介しました。と言うことは、上下のmarginをautoにすると垂直方向の中央寄せになるのかという仮説が立ちます。お察しの通り、margin-top: auto; margin-bottom: auto;は有効となります。


      
        #parent {
          min-height: 500px;
        }
        #child {
          margin-top: auto;
          margin-bottom: auto;
        }

注意事項として、親要素の高さにはheight: auto;、もしくはmin-height: 500px;を設定しなければなりません(min-height: 500px;は任意の数字)。親要素の高さに絶対値を設定すると、子要素がそれ以上大きくなった場合に、子要素が親要素からはみ出てしまうからです。height: auto;かmin-heightにすることで親要素は子要素が大きくなるにつれ、ブラウザが伸張してくれます。

もう一つ、垂直方向の中央寄せで覚えておきたいのは、positionプロパティを使った場合の設定方法です。


      
        #parent {
          position: relative;
        }
        #child {
          position: absolute;
          top: 50%;
          transform: translateY(-50%); 
        }