Das Zentrieren von Dingen ist einer der schwierigsten Aspekte von CSS.
Die Methoden selbst sind normalerweise nicht schwer zu verstehen. Stattdessen liegt es eher an der Tatsache, dass es so viele Möglichkeiten gibt, Dinge zu zentrieren.
Die von Ihnen verwendete Methode kann je nach dem zu zentrierenden HTML-Element oder der horizontalen oder vertikalen Zentrierung variieren.
In diesem Tutorial erfahren Sie, wie Sie verschiedene Elemente horizontal, vertikal sowie vertikal und horizontal zentrieren.
So zentrieren Sie horizontal
Das horizontale Zentrieren von Elementen ist im Allgemeinen einfacher als das vertikale Zentrieren. Hier sind einige allgemeine Elemente, die Sie möglicherweise horizontal zentrieren möchten, und verschiedene Möglichkeiten, dies zu tun.
So zentrieren Sie Text mit der CSS Text-Align Center-Eigenschaft
Um Text oder Links horizontal zu zentrieren, verwenden Sie einfach die text-alignEigenschaft mit dem Wert center:
Hello, (centered) World!
p { text-align: center; }
So zentrieren Sie eine Div mit CSS Margin Auto
Verwenden Sie die Shorthand- marginEigenschaft mit dem Wert 0 auto, um Elemente auf Blockebene wie ein divhorizontales Element zu zentrieren:
.child { ... margin: 0 auto; }
So zentrieren Sie eine Div horizontal mit Flexbox
Flexbox ist die modernste Methode, um Dinge auf der Seite zu zentrieren, und vereinfacht das Entwerfen reaktionsschneller Layouts erheblich. In einigen älteren Browsern wie Internet Explorer wird es jedoch nicht vollständig unterstützt.
Zur Zentrierung horizontal ein Element mit Flexbox, nur anwenden display: flexund justify-content: centerauf das übergeordnete Element:
.container { ... display: flex; justify-content: center; }
Vertikal zentrieren
Das vertikale Zentrieren von Elementen ohne moderne Methoden wie Flexbox kann eine echte Aufgabe sein. Hier gehen wir einige der älteren Methoden durch, um die Dinge zuerst vertikal zu zentrieren, und zeigen Ihnen dann, wie es mit Flexbox geht.
So zentrieren Sie einen Div vertikal mit absoluter CSS-Positionierung und negativen Rändern
Lange Zeit war dies der Weg, um die Dinge vertikal zu zentrieren. Für diese Methode müssen Sie die Höhe des Elements kennen, das Sie zentrieren möchten.
Setzen Sie zunächst die displayEigenschaft des übergeordneten Elements auf relative.
Setzen Sie dann für das untergeordnete Element die displayEigenschaft auf absoluteund topauf 50%:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }
Aber das zentriert wirklich nur vertikal die Oberkante des untergeordneten Elements.
Um das untergeordnete Element wirklich zu zentrieren, setzen Sie die margin-topEigenschaft auf -(half the child element's height):
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }
So zentrieren Sie ein Div vertikal mit Transformieren und Übersetzen
Wenn Sie die Höhe des Elements, das Sie zentrieren möchten, nicht kennen (oder auch nicht), ist diese Methode ein geschickter Trick.
Diese Methode ist der oben beschriebenen Methode mit negativen Rändern sehr ähnlich. Setzen Sie die displayEigenschaft des übergeordneten Elements auf relative.
Setzen Sie für das untergeordnete Element die displayEigenschaft auf absoluteund setzen Sie sie topauf 50%. Anstatt jetzt einen negativen Rand zu verwenden, um das untergeordnete Element wirklich zu zentrieren, verwenden Sie einfach transform: translate(0, -50%):
.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }
Beachten Sie, dass dies translate(0, -50%)eine Abkürzung für translateX(0)und ist translateY(-50%). Sie können auch schreiben, transform: translateY(-50%)um das untergeordnete Element vertikal zu zentrieren.
So zentrieren Sie eine Div vertikal mit Flexbox
Wie beim horizontalen Zentrieren von Dingen macht es Flexbox sehr einfach, Dinge vertikal zu zentrieren.
Vertikal ein Element zu zentrieren, gelten display: flexund align-items: centerdas Mutterelement:
.container { ... display: flex; align-items: center; }
So zentrieren Sie sowohl vertikal als auch horizontal
So zentrieren Sie ein Div vertikal und horizontal mit absoluter CSS-Positionierung und negativen Rändern
Dies ist der obigen Methode zum vertikalen Zentrieren eines Elements sehr ähnlich. Wie beim letzten Mal müssen Sie die Breite und Höhe des Elements kennen, das Sie zentrieren möchten.
Setzen Sie die displayEigenschaft des übergeordneten Elements auf relative.
Setzen Sie dann die displayEigenschaft des Kindes auf absolute, topauf 50%und leftauf 50%. Dadurch wird die obere linke Ecke des untergeordneten Elements vertikal und horizontal zentriert.
Um das untergeordnete Element wirklich zu zentrieren, wenden Sie einen negativen oberen Rand auf die Hälfte der Höhe des untergeordneten Elements und einen negativen linken Rand auf die Hälfte der Breite des untergeordneten Elements an:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }
So zentrieren Sie ein Div vertikal und horizontal mit Transformieren und Übersetzen
Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.
First, set the display property of the parent element to relative.
Next, set the child element's display property to absolute, top to 50%, and left to 50%.
Finally, use transform: translate(-50%, -50%) to truly center the child element:
.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
How to Center a Div Vertically and Horizontally with Flexbox
Flexbox is the easiest way to center an element both vertically and horizontally.
This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:
.container { ... display: flex; justify-content: center; align-items: center; }
That's everything you need to know to center with the best of 'em. Now go forth and center all the things.