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

使用此

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

Answer 2

尝试此操作后，我删除了align="center"部分，因为它已弃用。

我将你的css从使用绝对定位更改为使用边距将div居中。

我将高度始终从100px更改为表格的高度加上每个顶部和底部的10px。垂直居中。

我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 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;
}

垂直对齐容器中的元素

3 个答案: