Выровнять по вертикали CSS

Question

Я хочу, чтобы эти два текстовых поля были в центре страницы (по горизонтали и вертикали) ... Что не так с моим кодом?

<div style="vertical-align:middle; height:100%">
<center>
<form action="register.php" method="post">
Desired Username: <textarea type="text" name="user_username" style="width:60%;"></textarea><br>
Desired Password: <textarea type="text" name="user_password" style="width:60%;"></textarea><br>
<input type="submit" name="submitButton"/> <a href="http://www.********.com/register.php"><button name="Register">Register</button></a>
</form>
</center>
</div>

Answer 1

1. <center> устарело. Вместо этого используйте CSS для центрирования по горизонтали. Например, вы можете добавить text-align:center для контейнера и text-align:left для рассматриваемого элемента или margin:0 auto для элементов ширины жидкости.

2. vertical-align:middle; действительно имеет смысл только для ячеек таблицы или элементов, для которых установлено значение display:table-cell;. Если вы пытались отцентрировать изображение или одну строку текста, это было бы так же просто, как установить высоту строки элемента равной его высоте.

Поскольку мы смотрим здесь на что-то более сложное, вам просто нужно немного поэкспериментировать. Я бросил это вместе:

html, body {
    height:100%;
    text-align:center;
}

form {
    position:absolute;
    width:100%;
    top:50%;
    margin-top:-1em;
}

Я использовал -1em, потому что, например, если бы у меня было две строки текста, 1em была бы вдвое меньше высоты блока, занимаемого этими строками. Поскольку input s имеют примерно ту же высоту, что и обычный символ в верхнем регистре, дают или принимают несколько пикселей, 1em должно дать вам примерно половину высоты блока, который занимают эти входные данные.

Answer 2

Вы можете центрировать, задавая основное содержание div фиксированными размерами, а затем используя margin: 25% auto;. Авто центрирует его по горизонтали, а процентное соотношение должно центрировать по вертикали.

Редактировать: вот лучшее решение для выравнивания по вертикали, которое я использовал в прошлом: вы устанавливаете родительский div с высотой 50% и отрицательным полем снизу, равным половине высоты содержимого.

Так, например:

#parent {float:left; height:50%; margin-bottom:-50px;}
#child {clear:both; height:100px; position:relative;}

<div id="parent">
<div id="child">
    Content 
</div>
</div>

Из этого источника

Answer 3

Положить его внутрь стола сработало!очевидно, что свойство работает для таблиц, а не для divs ..

<div style="height:100%; text-align:center;"> 
<table height="100%" style="height:100%;"> 
<td height="100%" style="vertical-align:middle; height:100%;"> 
<center>