Zentrieren im CSS-Raster

179

Ich versuche, eine einfache Seite mit CSS Grid zu erstellen.

Was ich nicht mache, ist den Text aus dem HTML in die entsprechenden Rasterzellen zu zentrieren.

Ich habe Platzierung Inhalt versucht , in separaten divs sowohl innerhalb als auch außerhalb der left_bgund right_bgWähler und spielt mit einigen der CSS - Eigenschaften ohne Erfolg.

Wie mache ich das?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Erweitern Sie das Snippet

— Rote Beete
quelle

Bitte überprüfen Sie den Link w3.org/Style/Examples/007/center.en.html , ich hoffe, es wird hilfreich sein.

— Ali

433

Diese Antwort besteht aus zwei Hauptabschnitten:

Verstehen, wie die Ausrichtung in CSS Grid funktioniert.
Sechs Methoden zum Zentrieren in CSS Grid.

Wenn Sie nur an den Lösungen interessiert sind, überspringen Sie den ersten Abschnitt.

Struktur und Umfang des Rasterlayouts

Um zu verstehen, wie die Zentrierung in einem Rastercontainer funktioniert, ist es wichtig, zunächst die Struktur und den Umfang des Rasterlayouts zu verstehen.

Die HTML- Struktur eines Rastercontainers besteht aus drei Ebenen:

der Kontainer
der Gegenstand
der Inhalt

Jede dieser Ebenen ist hinsichtlich der Anwendung der Rastereigenschaften unabhängig von den anderen.

Der Umfang eines Rastercontainers ist auf eine Eltern-Kind-Beziehung beschränkt.

Dies bedeutet, dass ein Rastercontainer immer das übergeordnete Element und ein Rasterelement immer das untergeordnete Element ist. Rastereigenschaften funktionieren nur innerhalb dieser Beziehung.

Nachkommen eines Rastercontainers außerhalb der untergeordneten Elemente sind nicht Teil des Rasterlayouts und akzeptieren keine Rastereigenschaften. (Zumindest nicht, bis die subgridFunktion implementiert wurde, mit der Nachkommen von Rasterelementen die Zeilen des Primärcontainers respektieren können.)

Hier ist ein Beispiel für die oben beschriebenen Struktur- und Bereichskonzepte.

Stellen Sie sich ein Tic-Tac-Toe-ähnliches Gitter vor.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

Sie möchten, dass die X und O in jeder Zelle zentriert sind.

Sie wenden also die Zentrierung auf Containerebene an:

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

Aufgrund der Struktur und des Umfangs des Rasterlayouts justify-itemszentriert der Container die Rasterelemente und nicht den Inhalt (zumindest nicht direkt).

Code-Snippet anzeigen

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

Erweitern Sie das Snippet

Gleiches Problem mit align-items: Der Inhalt wird möglicherweise als Nebenprodukt zentriert, aber Sie haben das Layoutdesign verloren.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

Code-Snippet anzeigen

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

Erweitern Sie das Snippet

Um den Inhalt zu zentrieren, müssen Sie einen anderen Ansatz wählen. Unter erneuter Bezugnahme auf die Struktur und den Umfang des Rasterlayouts müssen Sie das Rasterelement als übergeordnetes Element und den Inhalt als untergeordnetes Element behandeln.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

Code-Snippet anzeigen

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

Erweitern Sie das Snippet

jsFiddle-Demo

Sechs Methoden zur Zentrierung im CSS-Raster

Es gibt mehrere Methoden zum Zentrieren von Rasterelementen und deren Inhalt.

Hier ist ein grundlegendes 2x2-Raster:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Erweitern Sie das Snippet

Flexbox

Verwenden Sie die Flexbox, um den Inhalt von Rasterelementen auf einfache Weise zu zentrieren.

Machen Sie das Gitterelement genauer zu einem flexiblen Container.

Bei dieser Methode liegt kein Konflikt, keine Spezifikationsverletzung oder ein anderes Problem vor. Es ist sauber und gültig.

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

Code-Snippet anzeigen

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Erweitern Sie das Snippet

In diesem Beitrag finden Sie eine vollständige Erklärung:

So zentrieren Sie Elemente vertikal und horizontal in Flexbox

Gitterstruktur

Ebenso wie ein Flex-Element auch ein Flex-Container sein kann, kann ein Rasterelement auch ein Raster-Container sein. Diese Lösung ähnelt der obigen Flexbox-Lösung, außer dass die Zentrierung mit Raster- und nicht mit Flex-Eigenschaften erfolgt.

Code-Snippet anzeigen

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Erweitern Sie das Snippet

`auto` Ränder

Verwenden Sie margin: autodiese Option, um Rasterelemente vertikal und horizontal zu zentrieren.

grid-item {
  margin: auto;
}

Code-Snippet anzeigen

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Erweitern Sie das Snippet

Um den Inhalt von Rasterelementen zu zentrieren, müssen Sie das Element in einen Rastercontainer (oder Flexcontainer) verwandeln, anonyme Elemente in ihre eigenen Elemente einschließen ( da sie nicht direkt von CSS als Ziel ausgewählt werden können ) und die Ränder auf die neuen Elemente anwenden.

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

Code-Snippet anzeigen

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Erweitern Sie das Snippet

Eigenschaften der Boxausrichtung

Wenn Sie die folgenden Eigenschaften zum Ausrichten von Rasterelementen verwenden möchten, lesen Sie den Abschnitt über die autoRänder oben.

align-items
justify-items
align-self
justify-self

https://www.w3.org/TR/css-align-3/#property-index

`text-align: center`

Um den Inhalt in einem Rasterelement horizontal zu zentrieren, können Sie die text-alignEigenschaft verwenden.

Code-Snippet anzeigen

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Erweitern Sie das Snippet

Beachten Sie, dass die vertikale Zentrierung vertical-align: middlenicht funktioniert.

Dies liegt daran, dass die vertical-alignEigenschaft nur für Inline- und Tabellenzellencontainer gilt.

Code-Snippet anzeigen

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Erweitern Sie das Snippet

Man könnte sagen, dass dies display: inline-grideinen Inline-Container erstellt, und das wäre wahr. Warum funktioniert das nicht vertical-alignin Rasterelementen?

Der Grund dafür ist, dass in einem Rasterformatierungskontext Elemente als Elemente auf Blockebene behandelt werden.

6.1. Anzeige von Rasterelementen

Der displayWert eines Rasterelements wird blockiert : Wenn die Angabe displayeines untergeordneten In-Flow-Elements eines Elements, das einen Rastercontainer generiert, ein Wert auf Inline-Ebene ist, wird das Äquivalent auf Blockebene berechnet.

In einem Blockformatierungskontext , für den die vertical-alignEigenschaft ursprünglich entwickelt wurde, erwartet der Browser nicht, dass ein Element auf Blockebene in einem Container auf Inline-Ebene gefunden wird. Das ist ungültiges HTML.

CSS-Positionierung

Schließlich gibt es eine allgemeine CSS-Zentrierungslösung, die auch in Grid funktioniert: die absolute Positionierung

Dies ist eine gute Methode zum Zentrieren von Objekten, die aus dem Dokumentfluss entfernt werden müssen. Zum Beispiel, wenn Sie möchten:

Text über einem Bild zentrieren oder
Platzieren Sie Sternchen (*) über den erforderlichen Formularfeldern

Legen Sie einfach position: absolutedas zu zentrierende Element und position: relativeden Vorfahren fest, der als enthaltender Block dient (normalerweise der übergeordnete Block). Etwas wie das:

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Code-Snippet anzeigen

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Erweitern Sie das Snippet

Hier ist eine vollständige Erklärung, wie diese Methode funktioniert:

Das Element bleibt nicht zentriert, insbesondere wenn die Größe des Bildschirms geändert wird

Hier ist der Abschnitt zur absoluten Positionierung in der Grid-Spezifikation:

https://www.w3.org/TR/css3-grid-layout/#abspos

— Michael Benjamin
quelle

Hallo Michael, ich habe mich gefragt, ob es möglich ist, die Größe jeder Spalte mithilfe des Rasters auf die Größe der kleinsten Spalte in der Zeile zu ändern.

— Der Codesee

@ TheCodesee, das kann je nach Ihren Anforderungen möglich sein. Haben Sie ein Codebeispiel? Oder stellen Sie eine neue Frage mit allen Details.

— Michael Benjamin

ist grid-container& grid-itemsind HTML-Tags?

— DiEcho

Sie sind benutzerdefinierte HTML-Tags. Sie können Ihre eigenen Tags erstellen, wie ich es für diese Demo getan habe. stackoverflow.com/q/36380449/3597276 @ pro.mean

— Michael Benjamin

Dies ist eine wunderbare Antwort, danke. Es machte mir klar, in Ihre beiden ersten Beispiele, dass zwischen flexund grid, align-itemsbleibt gleich , aber aus irgendeinem Grund justify-contentwirdjustify-items

— WoJ

Sie können Flexbox verwenden, um Ihren Text zu zentrieren. Übrigens sind keine zusätzlichen Container erforderlich, da Text als anonymes Flex-Element betrachtet wird.

Aus den Flexbox-Spezifikationen :

Jedes untergeordnete Element eines Flex-Containers wird zu einem Flex-Element , und jeder zusammenhängende Textlauf, der direkt in einem Flex-Container enthalten ist, wird in ein anonymes Flex-Element eingeschlossen . Ein anonymes Flex-Element, das nur Leerzeichen enthält (dh Zeichen, die von der white-spaceEigenschaft betroffen sein können ), wird jedoch nicht gerendert (als wäre es so display:none).

So stellt gerade Rasterelemente als Flex - Container ( display: flex) und fügen align-items: centerund justify-content: centersowohl vertikal als auch horizontal zu zentrieren.

Optimierte auch HTML und CSS:

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

Erweitern Sie das Snippet

— Vadim Ovchinnikov
quelle

Versuchen Sie nicht einmal, Flex zu verwenden. bleib bei css grid !! :) :)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

macht hier die Zentrierarbeit.

Wenn Sie etwas zentrieren möchten, divdas sich innerhalb der Gitterzelle befindet, müssen Sie ein verschachteltes Gitter definieren, damit es funktioniert. (Bitte schauen Sie sich die Geige an, die beide dort gezeigten Beispiele zeigen.)

https://css-tricks.com/snippets/css/complete-guide-grid/

Prost!

— Konrad Albrecht
quelle

Ich habe mich über die verschachtelten Gitter gewundert. Danke, dass du mir gezeigt hast, wie es geht, denke ich. Sie denken also, dass Flex mit Grid vermieden werden sollte oder ist es in Ordnung zu kombinieren?

— Rote Beete

Es ist in Ordnung zu kombinieren, aber Sie müssen sicher sein, dass Sie das richtige Werkzeug für den Job verwenden. Nehmen Sie sich etwas Zeit und schauen Sie sich die Präsentation von Rachels an, die Ihnen viel über das Thema CSS-Raster verdeutlicht. youtu.be/3vJE3bVoF-Q

— Konrad Albrecht

Das Problem mit diesem Ansatz tritt auf, wenn Sie Rahmen für die Rasterelemente verwenden ...

— Andrew

Dies kann verkürzt werden durch place-self: center;.

— DevonDahon

Die Shorthand-Eigenschaft " CSS- Platzierungselemente" legt die Eigenschaften "Ausrichtungselemente" und "Ausrichtungselemente" fest. Wenn der zweite Wert nicht eingestellt ist, wird auch der erste Wert dafür verwendet.

.parent {
  display: grid;
  place-items: center;
}

— CloudBranch
quelle

place-itemswird derzeit nicht in edge unterstützt

— Konrad Albrecht

Versuchen Sie es mit Flex:

Plunker-Demo: https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

— Younis Ar M.
quelle

-2

Du willst das?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Erweitern Sie das Snippet

— Renato siqueira
quelle

Nicht ganz. Der Text sollte auch vertikal ausgerichtet sein.

— Rote Beete

Verwenden Sie

.text{ font-family: Raleway; font-size: large; text-align: center;  -webkit-transform: rotate(-90deg);  -moz-transform: rotate(-90deg);	  }

— Renato siqueira

Zentrieren im CSS-Raster

Struktur und Umfang des Rasterlayouts

Sechs Methoden zur Zentrierung im CSS-Raster

Flexbox

Gitterstruktur

auto Ränder

Eigenschaften der Boxausrichtung

text-align: center

CSS-Positionierung

`auto` Ränder

`text-align: center`