Warum display:table-cell nicht-center-Inhalte ohne display:table?

Wie Funktioniert display-Eigenschaft Arbeiten?

Display-Eigenschaft können Sie angeben, eine Reihe von Tisch-bezogenen Werte in Ordnung, um Elemente anzuzeigen, als ob Sie die Tisch-Elemente. Die verfügbaren Werte angezeigt werden:

• table macht das element verhält sich wie ein table-element
• table-row macht das element verhält sich wie eine Tabellenzeile (tr) element
• table-cell macht das element verhält sich wie eine Tabellenzelle (td) element
• table-row-group macht das element sich Verhalten wie eine Tabelle, Körper, Reihe, Gruppe
  (tbody) element
• table-header-group macht das element sich Verhalten wie eine Tabelle, Kopfzeile
  Gruppe (thead) element
• table-footer-group macht das element verhält sich wie eine Tabelle Fußzeile
  Gruppe (tfoot) element
• table-caption macht das element sich Verhalten wie eine Tabelle, caption-element
• table-column macht das element verhält sich wie eine Tabellenspalte (col)
  element
• table-column-group macht das element sich Verhalten wie eine Tabelle, Spalte, Gruppe
  (colgroup) element

überprüfen Sie die vollständige Liste hier... http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

aber dein Problem kann gelöst werden, wie dies

Check arbeiten fiddle http://jsfiddle.net/jZJXf/1/

Css sollte das so sein.

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: table;
}


#header {
    width: 100%;
    height: 2em;
    background: gray;
}

#vertical {
    display: table;
    width: 100%;
    height: 100%;
}

#horizontal {
    display:table;
    height: 500px;
    width: 500px;
    margin: 10% auto 0% auto;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
    bottom: 0px;
    display: table;

}

InformationsquelleAutor CSS Guy

Dein problem ist das layout. Sie brauchen eine öffnung, div, zeigt die Tabelle. Dann innerhalb der nächsten ein div, zeigt Tabelle Zeile. Innerhalb der es gibt Sie neben Ihrer Zelle der Tabelle divs.

<div id="testTable">
  <div id="testRow">
    <div id="testCell"></div>
    <div id="testCell"></div>
  </div>
  <div id="testRow">
    <div id="testCell"></div>
    <div id="testCell"></div>
  </div>
 </div>

Werden sollte, dass das layout des divs.

CSS wie folgt.

#testTable {
display: table;
}
#testRow {
display: table-row;
}
#testCell {
display: table-cell;
}

Natürlich fügen Sie die Inhalte, die Sie wollen, um die divs und die zusätzliche Formatierung des CSS. Diese Gliederung soll helfen, die als Leitlinie obwohl. Wenn Sie eine visuelle Referenz überprüfen Sie diese Seite aus. http://www.quirksmode.org/css/display.html

InformationsquelleAutor Tony318

Versuchen mit Ihr html mit der css, ich bin mir nicht sicher über die 10% oberen,unteren Rand, aber es funktionierte con css-deck.

body, html {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 2em;
    background: gray;
}

#vertical {
    display: table;
    width: 100%;
    height: 100%;
}

#horizontal {
    display:table;
    height: 500px;
    width: 500px;
    margin: 10% auto;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
    bottom: 0px;
}

InformationsquelleAutor Ateszki