Wie man ein DIV mit CSS -Netz zentriert

Fünf CSS -Gittermethoden für horizontal und vertikal ein Div

In diesem Artikel werden fünf CSS -Gittertechniken für horizontal und vertikal ein Div -Div -Zentrum untersucht. Diese Methoden gelten für jedes HTML -Element. Wir werden auch kurz auf Flexbox und Transform-basierte Zentrierung berühren, die an anderer Stelle abgedeckt wurden.

Key Takeaways:

• CSS -Gitter bietet fünf effiziente Möglichkeiten, eine DIV: place-self, place-items, place-content, automatische Ränder und Gitterbereiche zu zentrieren.
• place-self Zentren einzelne Netzwerke und lassen andere Gegenstände anders positionieren. Es kombiniert justify-self (horizontal) und align-self (vertikal).
• place-items gilt für den Rasterbehälter, ideal, wenn alle Elemente eine identische Platzierung benötigen. Es ist eine Abkürzung für justify-items und align-items.
• place-content richtet den gesamten Inhalt des Grid -Containers aus und behandelt alle Elemente als einzelne Gruppe. Es kombiniert justify-content und align-content.
• automatische Margen lassen den Browser den Umgebungsraum berechnen und verteilen, wobei die DIV in seine Gitterzelle zentrieren.

Setup:

Wir beginnen mit einem Container und einem einfachen Boxelement (DIV) zur Demonstration. Hier ist die HTML:

<code class="language-html"><article>
  <div></div>
</article></code>

und das anfängliche CSS:

<code class="language-css">article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}</code>

Alle Beispiele verwenden display: grid, wobei das article Element als Gitterbehälter festgelegt wird. Der Behälter ist breit und groß, um reichlich Platz zu bieten.

Zentriermethoden:

1. place-self: Dies zentriert leicht ein Netzelement in seiner Zelle.

<code class="language-css">article {
  display: grid;
}

div {
  place-self: center;
}</code>

[Codepen-Demo: Zentrieren von Gitter und Orts-Selbst] (Link zu CodePen)

place-self ist eine Kurzschrift für justify-self und align-self. Experimentieren Sie mit diesen individuellen Eigenschaften in der Codepen -Demo. Es ist am besten, einzelne Gegenstände zu zentrieren, während andere unterschiedlich positioniert werden können.

2. place-items: Diese Zentren sind alle Gitterelemente in ihren Zellen.

<code class="language-css">article {
  display: grid;
  place-items: center;
}</code>

[Codepen Demo: Zentrum ein Element mit CSS-Gitter und Place-items] (Link zu CodePen)

place-items ist eine Kurzschrift für justify-items und align-items. Fügen Sie der Codepen -Demo weitere Divs hinzu, um zu sehen, wie sie alle im Mittelpunkt stehen.

3. place-content: Dies zentriert sich den gesamten Netzinhalt als Gruppe.

<code class="language-html"><article>
  <div></div>
</article></code>

[Codepen Demo: Zentrum ein Element mit CSS-Gitter und Place-Content] (Link zu CodePen)

place-content ist eine Kurzschrift für justify-content und align-content. Experimentieren Sie mit space-around und space-evenly -Werten als Alternativen zu center.

4. Automatische Margen: Dies verwendet eine automatische Randberechnung für die Zentrierung.

<code class="language-css">article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}</code>

[Codepen Demo: Zentrum ein Element mit CSS -Gitter und automatischen Margen] (Link zu CodePen)

Mit dieser einfachen Technik können der Browser den Abstand verarbeiten.

5. Gitterbereiche: Diese Methode verwendet ein Multi-Reis-/Spaltenraster für eine präzise Platzierung.

<code class="language-css">article {
  display: grid;
}

div {
  place-self: center;
}</code>

[Codepen Demo: Mitte A Div mit CSS -Gitter] (Link zu CodePen)

Alternativ mit den benannten Netzbereichen:

<code class="language-css">article {
  display: grid;
  place-items: center;
}</code>

[Codepen -Demo: Mitte A Div mit CSS -Gitter mit benannten Bereichen] (Link zu CodePen)

Schlussfolgerung:

Alle Methoden zentrieren effektiv einen Div.

und automatische Margen sind für direktes Element -Targeting bequem. Wählen Sie die Methode, die für Ihre Layout -Komplexität und -bedürfnisse am besten geeignet ist. Denken Sie daran, dass diese Techniken auf Elementen jenseits der Divs funktionieren. Die Beispiele verwenden ein leeres DIV, aber das Hinzufügen von Inhalten behält die Zentrierung bei. place-self

(FAQS -Abschnitt entfernt, da er sich weitgehend wiederholt und die Frage -Antworten im Artikel bereits implizit behandelt wurden.)

Das obige ist der detaillierte Inhalt vonWie man ein DIV mit CSS -Netz zentriert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!