Normalerweise stehen die Dinge in der Mitte einer Website, nicht wahr? Und indem man Dinge in den Mittelpunkt stellt, zieht man am besten die Aufmerksamkeit auf sich, also versucht man logischerweise, das meistens zu tun. Elemente in die Mitte zu stellen, sollte also das Einfachste und Optimierteste sein, was man bei der Webentwicklung tun kann, nicht wahr?
Richtig?
FALSCH.
Es gibt so viele Möglichkeiten, so viele Optionen und trotzdem funktioniert es irgendwie nicht. Es ist das Aushängeschild der CSS-Beschwerden, und das aus gutem Grund. Stundenlanges Suchen nach „wie zentriert man Dinge in CSS“, „wie zentriert man ein div“, „wie zentriert man ein div in der Mitte der Seite“, „wie zentriert man einen Text in HTML“, „zentriert man ein div horizontal und vertikal“ und die Liste kann weitergehen.
Nichts sollte jemals so kompliziert sein.
Vielleicht liegt es an den verschiedenen und oft verwirrenden Methoden (manche besser, manche schlechter), die überall im Internet zu finden sind. Und vielleicht brauchen die Menschen eine Orientierungshilfe, wenn es um dieses Thema geht.
Hier sind sie also, die besten Methoden, um Dinge in CSS zu zentrieren.
1. Die grundlegende Lösung. Diese Lösung funktioniert für inline, inline-block, inline-table und inline-flex Elemente.
p { text-align: center }
2. Für Zentrierblöcke
p {
margin-left: auto;
margin-right: auto;
width: 4em
}
Oder
p {
margin: 0 auto;
width: 8em
}
3. Wenn es um Text geht, ist die Zeilenhöhe ein guter Trick, um ihn zu zentrieren. Dies funktioniert am besten bei einzeiligem Text. Halten Sie die Zeilenhöhe gleich der Höhe des Containers. So wie hier:
p {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
Aber wenn es mehrere Zeilen sind, verwenden Sie einfach:
p {
display: inline-block;
vertical-align: middle;
}
4. Das Zentrieren von Bildern ist etwas schwieriger, daher gibt es mehrere Lösungen. Die erste ist
img {
display: block;
margin-left: auto;
margin-right: auto;
}
5. Dieser ist auch für Bilder geeignet
img {
max-width: 100%;
height: auto;
}
6. Ein bisschen komplizierter, aber immer noch gut für Modals.
section {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
7. Die Zentrierung geht auch vertikal, nicht nur horizontal. Hier können wir wirklich eine Vielzahl von Optionen sehen, und hier kommt der Retter namens flex display ins Spiel.
Wenn Sie also Dinge mit flex zentrieren, können Sie Folgendes verwenden
div {
height: 10em;
display: flex;
align-items: center;
}
Aber denken Sie daran, dass Sie die Flex-Richtung einstellen müssen. Verwenden Sie also entweder
flex-direction:row;
Für die horizontale Ausrichtung ODER
flex-direction:column;
Für die vertikale Ausrichtung
8. Wenn wir schon beim Thema Flex sind, können wir auch Kombinationen verwenden wie
div {
height: 10em;
display: flex;
align-items: center;
justify-content: center
}
9. Natürlich können Sie mit position absolute Dinge sowohl horizontal als auch vertikal zentrieren
div {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
10. Eine der komplizierteren Lösungen ist die Anzeige des Elements in Form einer Tabelle. Es funktioniert trotzdem wie ein Traum, also verurteilen Sie es nicht, bevor Sie es ausprobiert haben.
div {
display: table-cell;
vertical-align: middle;
}
11. Sie möchten das Raster verwenden? Dann wird alles viel einfacher. Sie brauchen nur einen Wrapper mit
body, html {
height: 100%;
display: grid;
}
Und dann fügen Sie dies zu Ihrem Element hinzu
div {
margin: auto;
}
Haben wir etwas übersehen? Oder haben Sie andere Lösungen, die nicht aufgeführt sind?