Wie man ein Element horizontal und vertikal zentriert

Question

Ich versuche, den Inhalt meiner Registerkarten vertikal zu zentrieren, aber wenn ich dem CSS-Stil display:inline-flex hinzufüge, verschwindet die horizontale Textausrichtung.

Wie kann ich beide Textausrichtungen x und y für jede meiner Registerkarten machen?

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

    first
    second

Answer 1

CSS Flexbox / Grid Methode:

Beispiel hier / Vollbild Beispiel

In unterstützten Browsern setze das display des zielgerichteten Elements auf flex und verwende align-items: center für die vertikale Zentrierung und justify-content: center für die horizontale Zentrierung. Beachte, dass auch der Elterncontainer eine Höhe benötigt (in diesem Fall 100%).

html, body, .container {
    height: 100%;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

  Ich bin vertikal/horizontal zentriert!

---

Transform TranslateX/TranslateY Methode:

Beispiel hier / Vollbild Beispiel

In unterstützten Browsern (die meisten von ihnen) kannst du top: 50%/left: 50% in Kombination mit translateX(-50%) translateY(-50%) verwenden, um das Element dynamisch vertikal/horizontal zu zentrieren.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

    Ich bin vertikal/horizontal zentriert!

---

Table-cell/Vertical-align: Middle Methode:

Beispiel hier / Vollbild Beispiel

In einigen Fällen musst du sicherstellen, dass die Höhe des html/body Elements auf 100% gesetzt ist.

Für die vertikale Ausrichtung setze die width/height des Elternelements auf 100% und füge display: table hinzu. Ändere dann für das Kindelement das display in table-cell und füge vertical-align: middle hinzu.

Wenn du das Element zentrieren möchtest, könntest du entweder text-align: center hinzufügen, um den Text und andere inline Kindelemente zentrieren. Alternativ könntest du margin: 0 auto verwenden, vorausgesetzt das Element ist block Ebene.

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

    Ich bin vertikal/horizontal zentriert!

---

Absolut positioniert 50% vom oberen Rand mit Verschiebungsmethode:

Beispiel hier / Vollbild Beispiel

Dieser Ansatz geht davon aus, dass der Text eine bekannte Höhe hat - in diesem Fall 18px. Positioniere das Element einfach absolut 50% vom oberen Rand entfernt, relativ zum Elternelement. Verwende einen negativen margin-top Wert, der die Hälfte der bekannten Höhe des Elements beträgt, in diesem Fall - -9px.

html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

    Ich bin vertikal/horizontal zentriert!

---

Die line-height Methode (wenig flexibel - nicht empfohlen) Methode:

Beispiel hier

In einigen Fällen wird das Elternelement eine feste Höhe haben. Für die vertikale Zentrierung musst du einfach einen line-height Wert im Kindelement setzen, der der festen Höhe des Elternelements entspricht.

Obwohl diese Lösung in einigen Fällen funktioniert, ist es erwähnenswert, dass sie nicht funktioniert, wenn es mehrere Zeilen Text gibt - wie hier.

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}

    Ich bin vertikal/horizontal zentriert!

Answer 2

Wenn CSS3 eine Option ist (oder Sie eine Alternative haben), können Sie transform verwenden:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

Im Gegensatz zum ersten Ansatz oben sollten Sie nicht left: 50% mit der negativen Translation verwenden, da es einen Überlauf-Bug in IE9+ gibt. Verwenden Sie einen positiven right-Wert und Sie werden keine horizontalen Scrollleisten sehen.

Answer 3

So verwenden Sie zwei einfache Flexbox-Eigenschaften, um n divs auf den beiden Achsen zu zentrieren:

• Legen Sie die Höhe Ihres Containers fest: Hier wird der body auf mindestens 100 Ansichtshöhe gesetzt.
• align-items: center; zentriert die Blöcke vertikal, wenn die Flex-Richtung row ist, sonst horizontal, wenn die Flex-Richtung Spalte ist

• justify-content: space-around; verteilt den freien Platz vertikal, wenn die Flex-Richtung row ist, sonst horizontal, wenn die Flex-Richtung Spalte ist, um die div-Elemente herum

  body { min-height: 100vh; display: flex; align-items: center; justify-content: space-around; }

  foo bar

Answer 4

Der beste Weg, um eine Box sowohl vertikal als auch horizontal zu zentrieren, besteht darin, zwei Container zu verwenden:

Der äußere Container:

• sollte display: table; haben

Der innere Container:

• sollte display: table-cell; haben
• sollte vertical-align: middle; haben
• sollte text-align: center; haben

Die Inhaltsbox:

• sollte display: inline-block; haben
• sollte die horizontale Textausrichtung anpassen, es sei denn, Sie möchten den Text zentriert haben

Demo:

body {
    margin : 0;
}

.outer-container {
    display: table;
    width: 80%;
    height: 120px;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

        Zentriere das!

Siehe auch dieses Fiddle!

Zentrierung in der Mitte der Seite:

Um Ihren Inhalt in der Mitte Ihrer Seite zu zentrieren, fügen Sie Folgendes zu Ihrem äußeren Container hinzu:

• position : absolute;
• width: 100%;
• height: 100%;

Hier ist eine Demo dazu:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

        Zentriere das!

Siehe auch dieses Fiddle!

Answer 5

CSS-Raster: place-items

Endlich haben wir place-items: center für CSS-Raster, um es einfacher zu machen.

HTML

CSS

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

Ausgabe:

html,
body {
  height: 100%;
}

.container {
  display: grid;
  place-items: center;
  height: 100%;
}

.center {
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
  padding: 10px;
}

  I am always super centered within my parent