CSSグリッドを使用してDivを中央に配置する方法

5つのCSSグリッドメソッド水平方向および垂直にdivを中心 この記事では、水平方向と垂直の両方でDivを中心にするための5つのCSSグリッド手法を調査します。 これらの方法は、任意のHTML要素に適用できます。 また、他の場所でカバーされているFlexBoxとTransformベースのセンタリングについて簡単に触れます。

キーテイクアウト：

cssグリッドは、divを中心にするための5つの効率的な方法を提供します：

、

、
• 、自動マージン、およびグリッド領域。 place-selfplace-itemsは、個々のグリッドアイテムを中心にし、他のアイテムが異なる位置に自由に配置できるようにします。それはplace-content（水平）と
（垂直）を組み合わせます。
• place-selfjustify-selfは、すべてのアイテムが同一の配置を必要とするときに理想的なグリッドコンテナに適用されます。 それはalign-selfと
。
• の速記です place-itemsjustify-itemsグリッドコンテナのコンテンツ全体を整列させ、すべてのアイテムを単一のグループとして扱います。それはalign-itemsと
。
• を組み合わせます place-content自動マージンブラウザに周囲のスペースを計算して配布し、グリッドセル内にDivを中心にしています。 justify-content align-content
セットアップ：

デモ用のコンテナとシンプルなボックス要素（div）から始めます。 これがHTMLです：

および初期CSS：

<article>
  <div></div>
</article>

すべての例は、

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

を使用して、グリッドコンテナとして

要素を確立します。 容器は、十分なスペースを提供するために広くて高く作られています。

センターリング方法：display: gridarticle

：

これは、そのセル内のグリッドアイテムを簡単に中心にします。

1. place-self[Codepen Demo：Grid and Place-selfを使用してセンターリング]（Codepenへのリンク）

は

article {
  display: grid;
}

div {
  place-self: center;
}

と

の速記です。 Codepenデモでこれらの個々のプロパティを試してください。 他のアイテムを別の方法で配置できるようにしながら、個々のアイテムを中心にするのに最適です。

place-self justify-selfalign-self：

これは、セル内のすべてのグリッドアイテムを中心にします。

2. place-items[Codepen Demo：CSSグリッドと場所の項目を持つ要素を中央に配置]（Codepenへのリンク）

は

article {
  display: grid;
  place-items: center;
}

と

の速記です。 CodePenデモにDivを追加して、それらがどのように中心になったかを確認します。

place-items

3. place-content：これは、グリッドコンテンツ全体をグループとして中心にします。

<article>
  <div></div>
</article>

[Codepen Demo：CSSグリッドと場所間コンテンツを備えた要素を中心に]（Codepenへのリンク）<

は

とplace-contentの速記です。 justify-content。 align-content space-aroundspace-evenlyオートマージン：centerこれにより、センターに自動マージン計算が使用されます。

4. [Codepenデモ：CSSグリッドと自動マージンを含む要素を中心に]（Codepenへのリンク）
このシンプルな手法により、ブラウザが間隔を処理できます。

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

グリッド領域：

この方法では、正確な配置のためにマルチロー/列グリッドを使用します。

>

5. [Codepen Demo：CSSグリッドを備えたDivを中央に配置]（Codepenへのリンク）

article {
  display: grid;
}

div {
  place-self: center;
}

代わりに、名前付きグリッド領域を使用してください：

[Codepenデモ：名前付きエリアを使用してCSSグリッドを備えたDivを中心に]（Codepenへのリンク）

結論：

article {
  display: grid;
  place-items: center;
}

すべての方法は、効果的にDivを中心にしています。

および自動マージンは、直接要素ターゲティングに便利です。 レイアウトの複雑さとニーズに最適な方法を選択してください。 これらの手法は、Divを超えた要素で機能することを忘れないでください。 例では空のdivを使用していますが、コンテンツを追加するとセンタリングが維持されます。

（FAQSセクションは大部分が反復的であるため削除され、質問の答えはすでに記事で暗黙的にカバーされていました。）

以上がCSSグリッドを使用してDivを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。