Gefloatete und absolut positionierte Elemente zentrieren. Back to Basics.

centeredelements

Vor einiger Zeit wurde ich gefragt ob es möglich ist, gefloatete Elemente zu zentrieren. Es ist möglich, und die Lösung ist im Grunde genommen auch völlig logisch. Man kommt nur leider nicht so einfach darauf.
Mit diesem Beitrag möchte ich daher zwei elementare Fragen im Umgang mit CSS beantworten. Wie zentriere ich gefloatete und wie absolut positionierte Elemente?

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Absolut positionierte Elemente zentrieren

Wenn ihr ein absolut positioniertes Seitenelement zentrieren wollt, muss zunächst die Breite des Elements fest definiert werden. In unserem Beispiel hat der div-Container eine Breite von 300px.
Mit left:50%; wird die linke Kante des Containers auf 50% des Browserfensters verschoben. Wir wollen aber den Mittelpunkt des Containers bei 50% sehen. Daher verschieben wir das Element anschließend mit margin-left:-150px um die Hälfte seiner Breite wieder nach links. Das wars auch schon.
Wenn ihr wie im folgenden Beispiel zusätzlich ein padding verwendet, erhöht sich die Gesamtbreite. Folglich muss der Container etwas weiter nach links verschoben werden. Im Beispiel verwende ich ein padding von 20px auf allen Seiten. Das Element muss daher um 170 Pixel nach links verschoben werden.

Live Demo:

Live-Demo in neuem Fenster öffnen

HTML-Code:
 
<body> 
  <div id="centered">Inhalt</div>
</body>

CSS-Code:

#centered {
	border:1px solid silver;
	padding:20px;
	position:absolute;
	width:300px;
	top:20px;
	left:50%;
	margin-left:-170px; /* Breite des Elements + Padding */
}

Gefloatete Elemente zentrieren

Wenn ihr ein gefloatetes Element zentrieren wollt, müsst ihr zusätzlich ein Hilfs-Element erstellen das als Container dient. Dieses Element erhält ein left:50% und wird mit der linken Kante an der Bildschirmmitte ausgerichtet.

Das enthaltene Element wird nun mit left:-50% um die Hälfte seiner variablen Breite aus diesem Container nach links verschoben.

Live Demo:

Live-Demo in neuem Fenster öffnen

HTML-Code:
<div id="container">
  <div id="centered"> 
    Inhalt
  </div>
</div>

CSS-Code:

#container {
	float: left;
	position: relative;
	left: 50%;
}

#centered {
	float: left;
	position: relative;
	left: -50%;
	border:1px solid silver;
	padding:20px;
}

Ihr könnt die Beispieldateien beider Varianten hier herunterladen.

Download Beispieldateien

Links