Horizontale und vertikale Zentrierung

11/19/2017 22:27 Cℓoυd#1
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.:

Code:
.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:

Code:
.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.
11/19/2017 22:51 florian0#2
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: [Only registered and activated users can see links. Click Here To Register...]

Moderner gehts z.B. mit CSS Grid: [Only registered and activated users can see links. Click Here To Register...]
11/19/2017 22:54 Cℓoυd#3
Danke, mit CSS Grid funktioniert es perfekt!
11/20/2017 09:55 type.#4
Quote:
Originally Posted by florian0 View Post
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: [Only registered and activated users can see links. Click Here To Register...]

Moderner gehts z.B. mit CSS Grid: [Only registered and activated users can see links. Click Here To Register...]
Oder modern und einfach mit Flexbox. Da ist der Browsersupport noch ein wenig besser als es bei CSS-Grid der Fall ist.

Code:
div {
    display: flex;
    align-items: center; justify-content: center;
}
11/20/2017 11:19 Cℓoυd#5
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.