Вертикальное выравнивание не работает 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

Вы можете установить position: absolute на вашем body, и в центре его с помощью:

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/