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? <\/p>\n\n
Richtig?<\/p>\n\n
FALSCH.<\/p>\n\n
Es gibt so viele M\u00f6glichkeiten, so viele Optionen und trotzdem funktioniert es irgendwie nicht. Es ist das Aush\u00e4ngeschild 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. <\/p>\n\n
Nichts sollte jemals so kompliziert sein.<\/p>\n\n
Vielleicht liegt es an den verschiedenen und oft verwirrenden Methoden (manche besser, manche schlechter), die \u00fcberall im Internet zu finden sind. Und vielleicht brauchen die Menschen eine Orientierungshilfe, wenn es um dieses Thema geht. <\/p>\n\n
Hier sind sie also, die besten Methoden, um Dinge in CSS zu zentrieren.<\/p>\n\n
<\/p>\n\n
1. Die grundlegende L\u00f6sung. Diese L\u00f6sung funktioniert f\u00fcr inline, inline-block, inline-table und inline-flex Elemente. <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 2. F\u00fcr Zentrierbl\u00f6cke<\/strong><\/p>\n\n <\/p>\n\n Oder<\/p>\n\n <\/p>\n\n <\/p>\n\n 3. Wenn es um Text geht, ist die Zeilenh\u00f6he ein guter Trick, um ihn zu zentrieren. Dies funktioniert am besten bei einzeiligem Text. Halten Sie die Zeilenh\u00f6he gleich der H\u00f6he des Containers. So wie hier: <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n Aber wenn es mehrere Zeilen sind, verwenden Sie einfach:<\/p>\n\n <\/p>\n\n <\/p>\n\n 4. Das Zentrieren von Bildern ist etwas schwieriger, daher gibt es mehrere L\u00f6sungen. Die erste ist <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 5. Dieser ist auch f\u00fcr Bilder geeignet<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 6. Ein bisschen komplizierter, aber immer noch gut f\u00fcr Modals.<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 7. Die Zentrierung geht auch vertikal, nicht nur horizontal. Hier k\u00f6nnen wir wirklich eine Vielzahl von Optionen sehen, und hier kommt der Retter namens flex display ins Spiel. <\/p>\n\n <\/p>\n\n Aber denken Sie daran, dass Sie die Flex-Richtung einstellen m\u00fcssen. Verwenden Sie also entweder <\/p>\n\n <\/p>\n\n F\u00fcr die horizontale Ausrichtung ODER<\/p>\n\n <\/p>\n\n F\u00fcr die vertikale Ausrichtung<\/p>\n\n <\/p>\n\n 8. Wenn wir schon beim Thema Flex sind, k\u00f6nnen wir auch Kombinationen verwenden wie<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 9. Nat\u00fcrlich k\u00f6nnen Sie mit position absolute Dinge sowohl horizontal als auch vertikal zentrieren<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 10. Eine der komplizierteren L\u00f6sungen 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. <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 11. Sie m\u00f6chten das Raster verwenden? Dann wird alles viel einfacher. Sie brauchen nur einen Wrapper mit <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n Und dann f\u00fcgen Sie dies zu Ihrem Element hinzu<\/p>\n\n <\/p>\n\n <\/p>\n\n Haben wir etwas \u00fcbersehen? Oder haben Sie andere L\u00f6sungen, die nicht aufgef\u00fchrt sind? <\/strong><\/p>\n\n <\/p>\n\np { text-align: center }<\/code><\/p>\n\np {p {p {p {img {img {section {div {flex-direction:row;<\/code><\/p>\n\nflex-direction:column;<\/code><\/p>\n\ndiv {div {div {body, html {div {