Stefan Einspender: Inhalt vertikal und horizontal zentrieren

Hallo,

gesucht wird eine Lösung, wie man Inhalte sowohl vertikal als auch
horizontal im Browserfenster zentrieren kann. Dabei ist mir besonders
wichtig, dass keine Tabellen, Frames oder JavaScript verwendet wird.
Beim Zusammenschieben des Fensters soll der Inhalte nicht nach links
und/oder nach oben verschwinden (zumindest nicht ohne Scrollbalken).

Auf welchen Browser die Lösung funktioniert ist zweitrangig, es geht
mir primär um eine *saubere* CSS-Lösung.

Mit Tabellen würde der nachfolgende Quellcode ziemlich genau dieses
Problem beschreiben:

<html><head><title>center</title></head><body><table height="100%"
width="100%"><tr><td align="center">inhalt</td></tr></table></body>
</html>

Aber wie gesagt, es soll ohne Tabellen usw. *sauber* gelöst werden,
hat da jemand eine Idee?

Viele Grüße,
Stefan

  1. body { vertical-align:middle; text-align:center; }

    (Schade, geht nicht.)

    Es wäre zu schön gewesen um wahr zu sein ;-)

    emu

    1. Hallo,

      body { vertical-align:middle; text-align:center; }

      eh ich es vergesse, die Lösung *muß* XHTML 1.0 Strict und CSS2 valid
      sein, macht die Sache nicht unbedingt einfacher ;-)

      Viele Grüße,
      Stefan

    2. body { vertical-align:middle; text-align:center; }

      mit einem height:100%; könnte man der Sache näher kommen...

  2. Watn Schwachsinn

    ne * saubere * css-Lösung,
    die nicht Browserkompatibel ist ???

    Lasst im Forum bloss die Antwortbäume auf,
    damit derartiger Müll schnell hintenrausfällt ..

    1. Guten Abend!

      Wenn einer, der mit Mühe kaum
      Gekrochen ist auf einen Baum
      Schon meint, dass er ein Vogel wär'
      so irrt sich der.

      Wilhelm Busch

      File Griese

      Stonie

      1. Bin immer noch da ...

        Dämmern hier die Götter,
        oder was ist hier los ???

        Wen Ihr Euch gerne selbst beweihräuchert, Viel Spass
        Ich find das schon echt sektenmässig,
        was hier so abgeht ...

        1. Hallo itsme,

          nimm's dir nicht so arg zu Herzen, daß alle mehr oder weniger übel auf deine postings reagieren, sei gewiss:
          Du bist mein Freund ... mein ganz persönlicher Freund sogar!

          denn:

          ich mag ... Menschen, die von sich sagen "ich_bin_ich" - und nicht den Mumm haben ihren Namen zu nennen

          ich mag ... Menschen die konsequent sind (ich bin das erste und letzte mal hier) ??? wie oft noch das letzte mal ???

          ich mag ... Menschen die im Gossenslang Leistungen anderer schlechzureden versuchen

          ich mag ... Menschen die ihren Senf zu allem dazugeben wollen - ob nun praxis bezogene oder nur theoretisch gestellte Frage

          ich mag ... Neider mit Halbwissen

          aber:

          ich mag ... solchen Menschen im Real-Live nie begegnen - warum muß ich sie hier dann im Forum treffen/lesen/sehen (wie auch immer)

          Gruß
          der_bernd

      2. Nachtrag:
        und inhaltlich pasiert hier ja soviel,
        wie ich mir den Kaffeklatsch
        in der Bild-Radaktion vorstelle ...

        Was hat diese Antwort mit:
        "(CSS) Inhalt vertikal und horizontal zentrieren"
        zu tun ???

        Also: Völlige Kacke das Forum;
        wenn die Antwort denn
        nicht unter Gotteslästerung fällt ...

      3. * GRINS *

        und die Antworten werden chronologisch
        auch noch idiotisch dargestellt ...

        Mann, ist dat dilettantisch

      4. (noch ist es ja nicht so voll hier, da traue ich mich noch solche fast-null-Postings zu schreiben, wie das folgende....)

        Liebe Stonie,

        ich habe gerade erst gesehen, daß es doch tatsächlich noch den Archivierungswunschschalter gibt: den drücke ich jetzt 10 mal, denn Deine Antwort war (wie ja immer) einfach wunderbar und sollte in die FAQ zum Themenbereich: wie reagiere ich auf blöde Postings.... wunderbar....

        Chräcker
        http://www.Stempelgeheimnis.de

        1. Joho Chraecker,

          ich habe gerade erst gesehen, daß es doch tatsächlich noch den
          Archivierungswunschschalter gibt: den drücke ich jetzt 10 mal, denn Deine
          Antwort war (wie ja immer) einfach wunderbar und sollte in die FAQ zum
          Themenbereich: wie reagiere ich auf blöde Postings.... wunderbar....

          Ach wie gut, dass niemand weiss, dass 'Archivieren' nur einmal wirkt ;-)

          *fieses, breites grinsen*

          Gruss,
           CK

          1. Hallo,

            puh, da bin ich aber froh, ich hatte schon Angst, das da jemand "hinter den Kulissen" rausfindet, daß in Wirklichkeit nur 3 mal für den Beitrag gevotet wurde ;-))))

            Chräcker

            http://www.Stempelgeheimnis.de

            1. Joho,

              puh, da bin ich aber froh, ich hatte schon Angst, das da jemand "hinter den
              Kulissen" rausfindet, daß in Wirklichkeit nur 3 mal für den Beitrag gevotet
              wurde ;-))))

              *lol*

              Ja, klar, wir sitzen die ganze zeit vor der access log und schauen, ob da
              nicht irgendwer doppelt votet - so ein Poesewicht!

              ;)

              Gruss,
               CK

  3. Hallo Stefan!

    Da ich sowohl gerade Deine 'Nachricht' bekommen habe und im gleichen Moment Dein Thread hier gelesen habe, Poste ich den gewünschten Quellcode einfach noch mal hier, ok?

    <html><head>
    <title>center</title>
    <style type="text/css">
    <!--

    /* Für Opera 5.x und Mozilla 0.95 */
    body {
     background:#FFFFFF;
     color:#000000;
     min-width:320px;
    }

    div#inhalt {
     display:table-cell;
     vertical-align:middle;
     width:320px;
    }

    div#table {
     display:table;
     width:320px;
     height:100%;
     margin:auto;
    }

    p {
     background:#EEEEEE;
     margin:0px;
    }

    /* Anpassungen Für IE 5.x */
    /* Funktioniert leider nicht...
    body {
     text-align:center;
    }

    div#inhalt {
     height:100%;
     background-color:#ADADAD;
    }

    div#table {
     height:100%;
    }

    p {
     vertical-align:middle;
     text-align:left;
    } */
    -->
    </style>
    </head><body>
    <div id="table">
    <div id="inhalt"><p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    bla bla</p></div>
    </div></body></html>

    Viele Grüße,
    Sönke

    PS. Sorry das ich die Beispieldatei so schnell wieder von mein Server gelöscht hatte.

    1. Hallo Sönke,

      Poste ich den gewünschten Quellcode einfach noch mal hier, ok?

      gern :-)

      Ich habe mir mal erlaubt, die Sache etwas zu komprimieren, die nach-
      folgende Variante finde ich persönlich nahezu optimal, einig ein
      kleiner vertikaler Scrollbalken bei Opera stört mich, hat da jemand
      eine Idee?

      <html><head>
      <title>center-content</title>
      <style type="text/css">
      <!--
      body {
      margin: 0px;
      min-width: 500px;
      padding: 0px;
      text-align: center;
      }

      div#content {
      display: table-cell;
      margin: 0px;
      padding: 10px;
      text-align: left;
      vertical-align: middle;
      width: 500px;
      }

      div#table {
      display: table;
      height: 100%;
      margin: auto;
      padding: 0px;
      width: 500px;
      }
      -->
      </style>
      </head><body>
      <div id="table"><div id="content">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
      bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
      bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
      bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
      bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div></div>
      </body></html>

      Für die vertikale Zentrierung im IE habe ich auch keine akzeptable
      Lösung gefunden.

      PS. Sorry das ich die Beispieldatei so schnell wieder von mein Server gelöscht hatte.

      Kein Problem :-)

      Viele Grüße,
      Stefan

      1. OK, ich noch mal.

        Ich habe mir mal erlaubt, die Sache etwas zu komprimieren ...

        Empörend! :)

        einig ein kleiner vertikaler Scrollbalken bei Opera stört mich, hat da jemand eine Idee?

        Wenn es Dich so stark stört, probiere mal
          height: 99.999%;
        im body mit aufzunehmen. Funktioniert im Opera, habe aber jetzt nicht getestet was das bei anderen Browsern eventuell für Auswirkungen haben könnte.

        Für die vertikale Zentrierung im IE habe ich auch keine akzeptable Lösung gefunden.

        Tja, wer benutzt den auch schon :-þ

        Tschüß,
        Sönke