CSSで全体のセンタリングを設定する方法

CSS を使用して全体の中央揃えを実現します。垂直方向の中央揃えには align-item: center を設定します。水平方向の中央揃えには justify-content: center を設定します。 align-items プロパティと justify-content プロパティを一緒に設定すると、項目全体が中央に配置されます。

CSS を使用して全体の中央揃えを設定する方法

Web デザインでは、すべてのコンテンツを中央揃えにする必要がある場合があります。これは、CSS の align-items プロパティと justify-content プロパティを使用して実現できます。

align-items プロパティ

align-items プロパティは、コンテナ内の項目 (フレックス項目) の垂直方向の配置を設定するために使用されます。 align-items が center に設定されている場合、項目は垂直方向に中央揃えになります:

<code class="css">.container {
  display: flex;
  align-items: center;
}</code>

justify-content プロパティ

justify-content プロパティは、コンテナ内の項目 (フレックス項目) の水平方向の配置を設定するために使用されます。 justify-content を center に設定すると、項目は水平方向に中央揃えになります:

<code class="css">.container {
  display: flex;
  justify-content: center;
}</code>

全体を中央揃えにする

全体を中央揃えにするには、align-items プロパティと justify-content プロパティの両方を設定する必要があります:

<code class="css">.container {
  display: flex;
  align-items: center;
  justify-content: center;
}</code>

Example

次の例は、CSS を使用してすべてのコンテンツを Web ページの中央に配置する方法を示しています。

以上がCSSで全体のセンタリングを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。