Wie kann ich eine Tabelle horizontal und vertikal zentrieren?

Das horizontale Zentrieren eines Block-Elements (z.B. einer Tabelle) ist mit CSS ziemlich einfach zu lösen: Das umgebende Element (z.B. body), erhält für veraltete Browser (z.B. Netscape 4, MS IE bis 5.5 sowie 6.0 im "Quirks" Modus) text-align:center;, das Element selbst erhält - falls notwendig - eine Breitenangabe (width), zum zentrieren in guten Browsern die Angaben margin-left:auto; margin-right:auto; sowie, um den Inhalt wieder linksbündig auszurichten, text-align:left;

body { text-align:center; /* fuer Netscape 4 und MS IE */ } table { width:30em; margin-left:auto; margin-right:auto; /* Fuer gute Browser */ text-align:left; /* Text _in_ der Tabelle links ausrichten */ }

Hinweis: Dieser Teil der Lösung steht auch in der dciwam-FAQ und im Artikel "Ausrichtung von Block-Level-Elementen" in SelfHTML

Etwas kniffliger ist es mit dem vertikalen Zentrieren.

Modernes, "sauberes" Beispiel ohne Tabellen

Mit zwei äusseren DIV-Elementen, von denen das äussere mit display:table und das innere mit display:table-cell ausgezeichnet wird, kann man auch vertical-align:middle anwenden und somit ein drittes, innerstes DIV-Element zentrieren. Alles ohne Tabellen.

html, body { width:100%; height:100%; margin:0; padding:0; } div.aussentable { width:100%; height:100%; margin:0; padding:0; display:table; } div.aussentd { width:100%; height:100%; margin:0; padding:0; display:table-cell; vertical-align:middle; } div.innen { width:30em; margin-left:auto; margin-right:auto; text-align:left; } <body> <div class="aussentable"> <div class="aussentd"> <div class="innen"> <h1>Überschrift</h1> <p>Inhalt ...</p> </div> </div> </div> </body>

So sieht's aus: Beispielseite.

Dieses Beispiel funktioniert nur in modernen Browsern, z.B. in Firefox, MS Internet Explorer 8 und 9 oder Mozilla, aber nicht in veralteten Browsern wie MS Internet Explorer (bis Version 7) oder Netscape 4.

Mit der gleichen Methode kann man ein Bild oder einen Link als einzigen Inhalt einer Seite zentriert anzeigen: zentriertes Bild, zentrierter Link.

Veraltetes, zuverlässiges Beispiel mit Tabellen

Eine veraltete, nicht sehr saubere und elegante, dafür recht "zuverlässige" Methode besteht darin, eine äussere Tabelle mit einer einzigen Zelle zu machen und den Inhalt dieser Zelle horizontal und vertikal zu zentrieren.

Wichtiger Hinweis: Dies ist ein "Missbrauch" von Tabellen zu Layout-Zwecken, verstösst gegen die Empfehlungen des World Wide Web Consortiums (W3C) und entspricht nicht der "reinen Lehre".

Damit die äussere Tabelle die ganze Höhe und Breite des Browserfensters belegt, muss man die Höhe und Breite für die diese Tabelle sowie die Elemente HTML und BODY auf 100% setzen.
Für das innere, zentrierte Block-Level-Element muss man
margin-left:auto; margin-right:auto;
schreiben und ggf. eine Breitenangabe machen, z.B. wenn es sich um ein DIV-Element handelt, welches sonst die ganze zur Verfügung stehende Breite einnähme.

html, body { width:100%; height:100%; } table.aussen { width:100%; height:100%; } table.aussen td { text-align:center; vertical-align:middle; } div.innen { margin-left:auto; margin-right:auto; width:30em; text-align:left; } <body> <table class="aussen"><tr><td> <div class="innen">Zentrierter DIV</div> </td></tr></table> </body>

So sieht's aus: Beispielseite mit zentrierter Tabelle und Beispielseite mit zentriertem DIV-Block (beide veraltet, aber valide).

Diese Beispiele "funktionieren" in Mozilla, MS Internet Explorer 5 und 6, Opera und den meisten anderen modernen Browsern.

Wenn man innerhalb eines zentrierten DIV-Blocks weitere Elemente mit position:absolute; ausrichten will, kann man die Regel für DIV noch ergänzen:
div.innen { position:relative; /*...*/ }

So sieht's aus: Beispielseite mit zentriertem DIV-Block (zusätzlich mit position:relative). Der DIV-Block seinerseits enthält absolut positionierte Elemente. (Veraltet, aber valide).

Wenn man auch für den veralteten, sehr seltenen Browser Netscape 4.x ein vertikales Zentrieren erreichen will, muss man der äusseren Tabelle ein height-Attribut geben und hat somit nicht nur veralteten, sondern auch nicht standardkonformen HTML-Quellcode.

So sieht's aus: Beispielseite (veraltet, nicht valide!)

Weitere Ansätze

Eine Möglichkeit ist, der Tabelle, die zentriert werden soll, eine Höhenangabe in Prozent sowie eine Mindest-Höhe in einer anderen Einheit (z.B. em oder px) zu geben und den oberen und unteren Aussenabstand mit gleichen Prozent-Werten anzugeben.
table { height:60%; min-height:10em; margin-top:20%; margin-bottom:20%; }
(20 + 60 + 20 = 100).

Wenn der Inhalt der Tabelle bekannt ist, kann man die Höhe und die Breite in Einheiten wie em oder px angeben und nur den oberen und unteren Aussenabstand mit Prozentwerten, z.B. so:
table { height:10em; margin-top:20%; margin-bottom:20%; }

Vollständiges Beispiel:

body { margin:0; border:0 none; padding:0; text-align:center; /* fuer Netscape 4 und MS IE */ } table { height:60%; min-height:10em; width:30em; margin-left:auto; margin-right:auto; /* Fuer gute Browser */ margin-top:20%; margin-bottom:20%; text-align:left; /* Text _in_ der Tabelle links ausrichten */ }

So sieht's aus: Beispielseite.

Dieses Beispiel "funktioniert" vermutlich nicht richtig, und auch wenn die Tabelle schön in der Mitte des Browserfensterst steht, ist das vielleicht nur der Fall, weil das Fenster gerade die richtige Höhe hat.

Bei wpdfd.com gibt es ein weiteres Beispiel, wo eine "Box" mit (in Pixeln) festgelegter Grösse mit CSS (position) zentriert wird:
Beispielseite
http://www.wpdfd.com/editorial/thebox/deadcentre3.html
- Erklärung dazu
http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Ebenfalls mit absoluter Positionierung arbeitet der Lösungsvorschlag im Beitrag Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?
http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte
in der FAQ zu SelfHTML

Im Artikel Horizontal und vertikal zentrieren mit XHTML und CSS
http://suit.rebell.at/artikel/horizontal-und-vertikal-zentrieren-mit-xhtml-und-css
(Beispielseite) schlägt Sigfried Arnold (suit) vor, oben an der Box, die zentriert werden soll, einen leeren DIV zu plazieren, der die halbe Höhe des Browserfensters einnimmt und der unten einen negativen Abstand hat, der die Hälfte der Höhe der zu zentrierenden Box beträgt.

Auf diesen FAQ-Eintrag verlinken:
Wie kann ich eine Tabelle horizontal und vertikal zentrieren?
http://www.tiptom.ch/homepage/faq.html?q=tabzentriert

Zur Liste mit allen Fragen

Zum Seitenanfang

Alle Rechte beim Autor: Thomas Lüthi.
E-Mail: info@tomogramm.ch (Bitte keine Werbung zusenden)

Zuletzt bearbeitet am 10.01.2020

URL dieser Seite: http://www.tiptom.ch/homepage/faq.html

Druckversion dieser Seite