Centering in CSS Leitfaden

Manchmal können Inline-/Textelemente vertikal zentriert erscheinen, einfach weil darüber und darunter gleicher Abstand (Padding) ist.

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

Wenn Polsterung aus irgendeinem Grund keine Option ist und Sie Text zentrieren möchten, der sich nicht umbrechen wird, gibt es einen Trick, bei dem die line-height gleich der Höhe gesetzt wird, um den Text zu zentrieren.

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

Gleicher Abstand oben und unten kann auch für mehrere Textzeilen den zentrierten Effekt erzielen, aber wenn das aus irgendeinem Grund nicht funktioniert, kann das Element, in dem sich der Text befindet, eine Tabellenzelle sein, entweder buchstäblich oder mit CSS so behandelt werden. Die Eigenschaft vertical-align behandelt dies in diesem Fall, im Gegensatz zu dem, was sie normalerweise tut, nämlich die Ausrichtung von Elementen in einer Zeile zu handhaben. (Mehr dazu.)

Wenn etwas Tabellenähnliches nicht in Frage kommt, könnten Sie vielleicht Flexbox verwenden? Ein einzelnes Flex-Kind kann ziemlich einfach in einem Flex-Elternteil zentriert werden.

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

Denken Sie daran, dass dies nur dann wirklich relevant ist, wenn der übergeordnete Container eine feste Höhe hat (px, %, usw.), weshalb der Container hier eine Höhe hat.

Wenn beide Techniken nicht in Frage kommen, könnten Sie die „Ghost-Element“-Technik anwenden, bei der ein vollsichtiger Pseudo-Element im Container platziert wird und der Text mit diesem vertikal ausgerichtet wird.

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

Es ist ziemlich üblich, die Höhe im Layout von Webseiten nicht zu kennen, aus vielen Gründen: Wenn sich die Breite ändert, kann der Textumbruch die Höhe ändern. Unterschiede in der Textgestaltung können die Höhe ändern. Unterschiede in der Textmenge können die Höhe ändern. Elemente mit einem festen Seitenverhältnis, wie Bilder, können bei Größenänderung die Höhe ändern. Etc.

Aber wenn Sie die Höhe kennen, können Sie vertikal zentrieren, so

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

Es ist immer noch möglich, es zu zentrieren, indem man es um die Hälfte seiner Höhe nach oben schiebt, nachdem man es um die Hälfte nach unten geschoben hat

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Wenn nicht, müssen Sie nur den Inhalt darin vertikal zentrieren. Tabellen oder CSS-Display, um Elemente in Tabellen zu verwandeln, können den Trick machen.

Keine große Überraschung, das ist in Flexbox viel einfacher.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Sie können die Zentrierung in Flexbox auch erreichen, indem Sie margin: auto; auf dem untergeordneten Element verwenden.