CSSで要素を中央揃えにする方法

CSSを使用して要素を中央に配置することは、ある場合には常に簡単であり、他の場合には困難でした。これは、CSSを中心に据える方法の完全なリストであり、最新のCSS手法も含まれています。

CSSで要素を中央揃えにすることは、水平方向または垂直方向に中央揃えにする必要がある場合とは大きく異なるタスクです。

この投稿では、最も一般的なシナリオとその解決方法について説明します。新しいソリューションがによって提供される場合Flexbox前進する必要があるため、古い手法は無視します。Flexboxは、IE10を含め、何年も前からブラウザーでサポートされています。

テキストは、を使用して水平方向に中央揃えするのが非常に簡単です。text-alignプロパティをに設定center：

p {
  text-align: center;
}

テキスト以外のものを中央に配置する最新の方法は、Flexboxを使用することです。

#mysection {
  display: flex;
  justify-content: center;
}

内部の任意の要素#mysection水平方向の中央に配置されます。

Center horizontally

Flexboxを使用したくない場合の代替アプローチは次のとおりです。

テキスト以外のものは、左右に自動マージンを適用し、要素の幅を設定することで中央に配置できます。

section {
  margin: 0 auto;
  width: 50%;
}

上記margin: 0 auto;の省略形です：

section {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}

アイテムをに設定することを忘れないでくださいdisplay: blockインライン要素の場合。

伝統的に、これは常に困難な作業でした。 Flexboxは、これを可能な限り簡単な方法で行うための優れた方法を提供します。

#mysection {
  display: flex;
  align-items: center;
}

内部の任意の要素#mysection垂直方向の中央に配置されます。

Center vertically

垂直方向と水平方向に中央揃えにするFlexboxの手法を組み合わせて、ページ内の要素を完全に中央揃えにすることができます。

#mysection {
  display: flex;
  align-items: center;
  justify-content: center;
}

Center both vertically and horizontally

同じことが使用して行うことができますCSSグリッド：

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

私の無料ダウンロードCSSハンドブック