[CSS] Horizontale und vertikale Zentrierung

[Cℓoυd]

Hallo, ich habe folgendes Problem. Ich möchte ein Element horizontal und vertikal zentrieren. Das Element soll eine feste Breite haben und die Höhe soll sich automatisch am Content anpassen (Unbekannte Höhe). Ich habe diverse Lösungsansätze dazu gefunden und ausprobiert z.B.:

.zentriert {
	width: 580px;
	top: 33%;
	right: 0;
	left: 0;
	margin: auto;
	display: inline-block;
	position: absolute;
}

Das funktioniert soweit, insofern man eine Auflösung von 1920x1080 hat. Bei anderen Auflösungen verschiebt sich das Element nach unten und die vertikale Ausrichtung funktioniert nicht mehr. Dann habe ich folgendes versucht:

.zentriert {
	width: 580px;
	top: 50%;
	left: 50%;
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);	
}

Hier funktioniert die horizontale und vertikale Zentrierung einwandfrei! Wenn ich jedoch eine Tabelle im vorhandenen Html Code einfüge, blurrt die ganze Website.

Ich weiß einfach nicht mehr weiter .. es wäre nett, wenn mir jemand helfen kann. Ich hoffe die Code Beispiele reichen.

[florian0]

Transform würde ich vermeiden. Das blurrt an allen ecken und enden und ist auch für was anderes gedacht.

Am einfachsten gehts mit 2 Elementen:

Moderner gehts z.B. mit CSS Grid:

[Cℓoυd]

Danke, mit CSS Grid funktioniert es perfekt!

[type.]

Originally Posted by florian0

Transform würde ich vermeiden. Das blurrt an allen ecken und enden und ist auch für was anderes gedacht.

Am einfachsten gehts mit 2 Elementen:

Moderner gehts z.B. mit CSS Grid:

Oder modern und einfach mit Flexbox. Da ist der Browsersupport noch ein wenig besser als es bei CSS-Grid der Fall ist.

div {
    display: flex;
    align-items: center; justify-content: center;
}

[Cℓoυd]

Hab mir mal die Browserunterstützung von Grid und Flexbox angesehen und mich dann doch für Flexbox entschieden. Auch wenn die Unterschiede gering sind.