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

WebページのレイアウトをCSSに中央揃えする2つの異なる方法を学びます。

ウェブサイトの記事のレイアウトをスタイリングしていて、<article>を中央揃えにしたいとします。 ページの真ん中に水平方向に要素を配置します。

あなたはいくつかの方法でそれを行うことができます。要素を水平方向に中央揃えにする最も単純で古典的なアプローチは、CSSプロパティmarginを使用することです。 左右の値をautoに設定します 。

無料のCodePenエディターを使用してフォローできます。

記事のレイアウトについては、次の基本的なHTMLマークアップを使用してください。

<article>
  <h1>Title for your article</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の方法による プロパティを子要素に渡します。レイアウトを中央揃えにする最も簡単な方法は、<article>をラップすることです。 別の要素に要素を追加し、flexboxを追加します その新しい親要素のプロパティ。

以前の記事要素を<main>でラップしましょう 要素：

<main>
  <article>
    <h1>Title for your article</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>

そして、フレックスボックスのプロパティを移動します（max-widthではありません） ）article { }から 新しいmain { }への宣言ブロック ブロック：

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

article {
  max-width: 640px;
}

これは、margin: autoと同じように機能します 以前に見た宣言。