Horizontal und vertikal zentriertes Layout

Es wird oft gewünscht ein Layout horizontal zentriert darzustellen. Manchmal soll es auch vertikal in der Mitte liegen. In diesem Artikel stelle ich für beides eine Lösung vor.

Horizontal zentrieren

Möchte man ein Layout horizontal zentrieren, reicht ein wenig CSS, um dies zu realisieren. Gehen wir von folgendem HTML aus:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.     <head>
  4.         <title>Horizontal zentriertes Layout</title>
  5.         <link rel="stylesheet" type="text/css" href="style.css"/>
  6.     </head>
  7.     <body>
  8.         <div id="wrapper">
  9.             <p>Der Wrapper ist zentriert.</p>
  10.         </div>
  11.     </body>
  12. </html>

Im CSS wird der Inhalt des body zentriert, während im Wrapper dies für die Texte wieder zurückgesetzt wird. Dem Wrapper wird nach links und rechts ein automatisches margin gegeben. Hinzu kommen ein paar Angaben, damit man auch das Resultat vernünfitg erkennen kann.

  1. * { margin: 0; padding: 0; }
  2.  
  3. body { text-align: center; }
  4.  
  5. div#wrapper {
  6. 	background: #000;
  7. 	color: #fff;
  8. 	margin: 0 auto;
  9. 	text-align: left;
  10. 	width: 400px;
  11. }

Damit ist der Wrapper zentriert und wir sind fertig.

Vertikal zentrieren

Die hier aufgeführte Lösung benutzt ein DIV, das die Hälfte des Anzeigebereichs an Höhe hat. Es steht über dem eigentlichen Inhalt und verschiebt diesen nach unten. Dementsprechend gehen wir jetzt von dem unten stehenden HTML aus.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.     <head>
  4.         <title>Vertikal zentriertes Layout</title>
  5.         <link rel="stylesheet" type="text/css" href="style.css"/>
  6.     </head>
  7.     <body>
  8.         <div id="empty-wrapper"></div>
  9.         <div id="wrapper">
  10.             <p>Der Wrapper ist zentriert.</p>
  11.         </div>
  12.     </body>
  13. </html>

Im CSS blenden wir das hinzu gekommene DIV nun aus und geben ihm die Hälfte der Höhe vom Inhaltsbereich mal -1 als margin-top.

  1. * { margin: 0; padding: 0; }
  2.  
  3. body { height: 100%; width: 100%; }
  4.  
  5. div#empty-wrapper {
  6.     display: block;
  7.     float: left;
  8.     height: 50%;
  9.     margin-top: -300px; /* - Haelfte der Hoehe von #wrapper */
  10.     visibility: hidden;
  11.     width: 100%;
  12. }
  13.  
  14. div#wrapper {
  15.     background: #f00;
  16.     clear: both;
  17.     color: #fff;
  18.     height: 600px;
  19.     width: 500px;
  20. }

Jetzt ist das Layout vertikal zentriert. Es funktioniert zwar nur, wenn man die Höhe des Inhaltsbereiches kennt, sollte aber für die meisten Fälle nutzbar sein.

von mona am 14.01.2010

Tweet this bookmark on delicious

Kommentare

von Schnurlos Telefon am 21.08.2010 um 04:50

the useful info you presented do help our 
team&#39;s research for our company, 
appreaciate that.

von Rürup Rente Vergleich am 25.10.2010 um 20:46

Sehr guter und informativer Blog. Kann ich den 
News feed für diesen blog abonieren

von medical coding am 03.12.2010 um 11:53

Valuable info. Lucky me I found your site by 
accident, I bookmarked it.

von alex am 15.12.2010 um 15:33

du solltest einen spamschutz in dieses formular 
einbauen, haha ;-)

ps: danke 
für den artikel, er hat mir _wirklich_ geholfen.