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:

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

und das anf?ngliche CSS:

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

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

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.

article {
  display: grid;
}

div {
  place-self: center;
}

[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.

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

[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.

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

[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.

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

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

[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.

article {
  display: grid;
}

div {
  place-self: center;
}

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

Alternativ mit den benannten Netzbereichen:

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

[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!