Inhalte mit "margin: 0 auto;" zentrieren - suuuperpeinlich!

Hi Leute,
auch nach Jahren angewedetem CSS stolpere ich jedes mal, wenn ich ein neues Projekt angehe über den geleichen Anfängerfehler/probleme:
Die Inhalte die ich zentrieren will, wollen sich einfach nicht in die Mitte bewegen. Letztendlich klappt es immer irgendwie, aber der Weg ist immer nur Try&Error.
Kann mir mal jemand die Bedingungen auslisten, die gegeben sein müssen, dass ich ein Artikel, Bild, oder was auch immer mit "margin: 0 auto;" in die Mitte bekomme?
Ich werde noch kirre im Kopf!

Danke schon mal im Voraus!


Grüße
JK

Um ein Element mit margin: 0 auto; zentrieren zu können, muss es sich um ein Blockelement handeln. Außerdem muss das Element kleiner sein als der diesem Element zur Verfügung stehende Platz. Sonst ist der linke und rechte automatisch erzeugte Außenabstand gleich 0 und das Element bewegt sich keinen Milimeter.

Bei Inlineelementen zentrierst Du mit textalign: center;
Außerdem gibt es noch diverse Möglichkeiten bei Grid und Flexbox um Elemente zu zentrieren.
Also so ganz pauschale Antworten gibt es da nicht.

Kleiner Nachtrag: Auch wenn Du den Text eines Blockelementes in die Mitte bekommen willst nutzt Du textalign: center; Dabei hat das Blockelement selbst immer noch die gesamte zur Verfügung stehende Breite.

Nachtrag 2: Vielleicht ist dieser Artikel ganz interessant für Dich https://www.drweb.de/elemente-zentrieren-css/

Noch was zu den anderen Technologien:

Für Flexbox kann ich dir noch dieses kleine Wundertool empfehlen - https://the-echoplex.net/flexyboxes/

transform an für sich ist auch kuhl, kann aber sein dass die Schrift im Container blury wird.