CSSでレイアウトを中央揃えにする2つの方法

CSSを使ってWebページのレイアウトを中央揃えにする、2つの異なる方法をご紹介します。

たとえば、Webサイトの記事レイアウトをスタイリングしていて、<article>要素をページの左右中央にぴったり配置したいとしましょう。

これを実現する方法はいくつかあります。最もシンプルで定番の手法は、CSSのmarginプロパティを使い、左右の値をautoに設定することです。

無料のCodePenエディタを使えば、実際に手を動かしながら試すこともできます。

まず、記事レイアウト用の基本的なHTMLマークアップを見てみましょう。

<article>
  <h1>記事のタイトル</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
    dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
    recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
    reprehenderit error.
  </p>
</article>

続いて、以下のCSS宣言ブロックを用意します。

article {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

これで、記事レイアウトがWebページの中央に正確に配置されます。

max-widthプロパティは、要素を水平方向に中央揃えするために必須です。これを指定しないと、テキストがページの左端から右端まで自動的に広がってしまい、中央揃えの効果が得られないためです。

Flexboxで水平方向に中央揃えする

モダンなflexboxプロパティを使っても中央揃えが可能です。flexboxはプロパティが子要素へ引き継がれる仕組みになっているため、レイアウトを中央揃えする最も簡単な方法は、<article>要素を別の要素で囲み、その新しい親要素にflexboxのプロパティを追加することです。

先ほどのarticle要素を、<main>要素で囲んでみましょう。

<main>
  <article>
    <h1>記事のタイトル</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aut
      dignissimos, doloribus accusantium provident nemo a voluptatibus nihil
      recusandae perferendis nesciunt quae illo cum eos dolore esse, architecto
      reprehenderit error.
    </p>
  </article>
</main>

次に、flexbox関連のプロパティ(max-widthは除く)をarticle { }ブロックから、新しく作成したmain { }ブロックへ移動します。

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

article {
  max-width: 640px;
}

この結果は、先ほどご紹介したmargin: autoの指定とまったく同じように機能し、記事レイアウトがページ中央に配置されます。