垂直對齊無法正常工作CSS/HTML

Question

我試圖垂直對齊我的頁面，但我不能讓它工作。 我試過其他問題的其他解決方案，但目前爲止他們都沒有爲我工作，有誰知道爲什麼？

這是HTML代碼中，我要垂直對齊：

header { 
 
     margin: 0 auto; 
 
     width: 600px; 
 
     margin-bottom: 3em; 
 
     margin-top: 3em; 
 
     text-align: center; 
 
    } 
 
    section { 
 
     width: 600px; 
 
     margin: 0 auto; 
 
     padding: 3px; 
 
     background-color: white; 
 
    } 
 
    #textbox { 
 
     color: #075488; 
 
     border: solid 3px #075488; 
 
    } 
 
    #textbox div { 
 
     font-weight: bold; 
 
     border-bottom: 2px solid #075488; 
 
     margin-left: 3em; 
 
     margin-right: 3em; 
 
     padding-left: 2em; 
 
     padding-right: 2em; 
 
     padding-top: 1.5em; 
 
     padding-bottom: 1em; 
 
     margin-bottom: 1em; 
 
     text-align: center; 
 
    } 
 
    #textbox table { 
 
     font-weight: normal; 
 
     width: 100%; 
 
     padding-right: 5em; 
 
     padding-left: 4em; 
 
     padding-bottom: 1em; 
 
     margin: 0 auto; 
 
     line-height: 1; 
 
    } 
 
    td:nth-child(3) { 
 
     width: 100px; 
 
    } 
 
    td:nth-child(2) { 
 
     text-align: center; 
 
    } 
 
    section p { 
 
     color: white; 
 
     font-size: 12px; 
 
     float: right; 
 
    }

<header id="header"> 
 
    <img src="images/image.png"> 
 
</header> 
 
<section id="section"> 
 
    <div id="textbox"> 
 
    <div>test</div> 
 
    <table> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</section>

有誰知道一個解決方案？

謝謝你！

如果CSS是不可能的，可以使用jQuery/Javascript來代替，如果是這樣的話，我該怎麼做呢？

Answer 1

你可以在你的body設置position: absolute，並通過居中：

body { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); /* Safari */ 
    transform: translate(-50%, -50%);   /* Other browsers */ 
} 

（記住在報頭去除上邊距）

body { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
header { 
 
    margin: 0 auto; 
 
    width: 600px; 
 
    margin-bottom: 3em; 
 
    text-align: center; 
 
} 
 
section { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    padding: 3px; 
 
    background-color: white; 
 
} 
 
#textbox { 
 
    color: #075488; 
 
    border: solid 3px #075488; 
 
} 
 
#textbox div { 
 
    font-weight: bold; 
 
    border-bottom: 2px solid #075488; 
 
    margin-left: 3em; 
 
    margin-right: 3em; 
 
    padding-left: 2em; 
 
    padding-right: 2em; 
 
    padding-top: 1.5em; 
 
    padding-bottom: 1em; 
 
    margin-bottom: 1em; 
 
    text-align: center; 
 
} 
 
#textbox table { 
 
    font-weight: normal; 
 
    width: 100%; 
 
    padding-right: 5em; 
 
    padding-left: 4em; 
 
    padding-bottom: 1em; 
 
    margin: 0 auto; 
 
    line-height: 1; 
 
} 
 
td:nth-child(3) { 
 
    width: 100px; 
 
} 
 
td:nth-child(2) { 
 
    text-align: center; 
 
} 
 
section p { 
 
    color: white; 
 
    font-size: 12px; 
 
    float: right; 
 
}

<header id="header"> 
 
    <img src="http://placehold.it/600x50"> 
 
</header> 
 
<section id="section"> 
 
    <div id="textbox"> 
 
    <div>test</div> 
 
    <table> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</section>

Answer 2

爲了使用垂直對齊，您必須爲您的元素提供高度。你的元素目前沒有設定高度，所以它們的高度是將包含其內容的最小值，因此他們不會延伸到你的頁面高度

Answer 3

你可以只說：

td {text-align: center} 

http://jsfiddle.net/k30se3fv/3/