Вертикально выровнять элемент в контейнере

Question

Мне нужно вертикально выровнять свою форму в середине моего первого div. Я располагаю его по горизонтали, но я не могу заставить его выравниваться по середине по вертикали. В основном ровное расстояние от верхней и нижней.

<div id="login" style="position:absolute; width: 300px; height: 100px; z-index: 15; top: 50%; left: 50%; margin: -50px 0 0 -150px; background-color: #d0e9fc; border: 1px solid #B5BCC7;"> 
 
    <div align="center" style="vertical-align: middle;"> 
 
    <form th:action="@{/login}" method="post"> 
 
     <table> 
 
     <tr> 
 
      <td>Username:</td> 
 
      <td> 
 
      <input type="text" name="username" id="username" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Password:</td> 
 
      <td> 
 
      <input type="password" name="password" id="password" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
      <input class="sButton" type="submit" value="Sign in" label="Sign In" id="submitButton" /> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </form> 
 
    </div> 
 
</div>

Answer 1

Попробуйте это я удалил align="center" часть, как она амортизируется.

Я изменил ваш css с помощью абсолютного позиционирования, чтобы просто центрировать div, используя поля.

Я изменил высоту, всегда на 100 пикселей, на высоту формы плюс 10 пикселей на каждый верх и низ. Вертикально центрируя его.

I alsp добавил маржу: автоматическое центрирование к столу, чтобы центрировать стол в форме.

<div id="login" style="width: 300px; margin:auto; background-color: #d0e9fc; border: 1px solid #B5BCC7;"> 
 
    <div style="margin: auto; padding-top:10px; padding-bottom:10px;"> 
 
    <form th:action="@{/login}" method="post"> 
 
     <table style="margin:auto"> 
 
     <tr> 
 
      <td>Username:</td> 
 
      <td> 
 
      <input type="text" name="username" id="username" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Password:</td> 
 
      <td> 
 
      <input type="password" name="password" id="password" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
      <input class="sButton" type="submit" value="Sign in" label="Sign In" id="submitButton" /> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </form> 
 
    </div> 
 
</div>

Answer 2

Используйте этот

#login { 
    display: table; 
} 
#login > div { 
    display: table-cell; 
    vertical-align: middle; 
} 

Answer 3

Я снял встроенный стиль и добавил класс со следующими свойствами: http://codepen.io/anon/pen/WvMNZE

.c { 
    width: 300px; 
    height: 100px; 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
    background-color: #d0e9fc; border: 1px solid #B5BCC7; 
} 

body { 
    margin: 0; 
}