Div vertikal ausrichten (keine Tabellen)

Ich kann ein div horizontal ausrichten und der gesamte Inhalt sieht gut aus. Mit Blick auf die vertikale Ausrichtung wird ein Div ausgerichtet, das keine Tabellen enthält. Ich habe versucht, die Randpositionen im #container auf einige negative Werte zu setzen, aber das hat funktioniert. Ich weiß, dass CSS dies noch nicht unterstützt.

Hier ist mein Markup:

body
{
    background: #777; /* gray */
    text-align: center;
}

#container 
{ 
    margin: 0 auto;
    width: 968px;
    text-align: left;
}

#toptab
{
    background: #f77; /* red */
    height: 14px;
    width: 968px;
}

#middletab
{
    background: #7f7; /* green */
    width: 968px;
}

#data
{
    width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */
    padding-left: 10px; 
    padding-right 10px;
}

#bottomtab
{
    background: #77f; /* blue */
    height: 14px;
    width: 968px;
}
<div id="container">
    <div id="toptab"></div>
    <div id="middletab">
        <div id="data">
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
            The quick brown fox jumped over the big red bear.
        </div>
    </div>
    <div id="bottomtab"></div>
</div>

Führen Sie das obige Snippet aus und klicken Sie auf "Ganze Seite", um zu sehen, wie es aktuell aussieht. Grundsätzlich sieht es horizontal großartig aus, aber jetzt muss es auch vertikal in der Seite zentriert werden.

Das Element, das ich vertikal ausrichten möchte, ist das #container div. Der Effekt würde dazu führen, dass das gesamte Div und alle Sub-Divs nicht nur horizontal, sondern auch vertikal ausgerichtet werden. Ich weiß, dass dies möglich ist und ich weiß, dass Andy Budd eine solche Lösung veröffentlicht hat, aber sie scheint bei mir nicht zu funktionieren.

Antworten auf die Frage(8)

Ihre Antwort auf die Frage