Html 如何使桌子居中？ 用户名： 密码：

它确实使表格居中，但我想在页面中居中，上面的代码只居中，但它位于页面顶部

如下图所示：

---

与屏幕垂直对齐的最简单方法是使用

vh

如下测量：

表单{
位置：相对位置；
顶部：40vh；
}

用户名：
密码：

您需要css来完成此操作。试试这个

<form method="post">
    <table align="center" cellpadding="2" cellspacing="2" border="0">
        <tr>
            <td>Username:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login"></td>
        </tr>
    </table>
</form>

或者你可以试试这个

.form,form {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
 }

---

首先，您可以阅读一些其他好的答案： ,

在这里，您可以通过CSS 3实现：

HTML

<div style="display:flex;justify-content:center;align-items:center;">
  <form></form>
</div>

用户名：
密码：

形式
{
位置：相对位置；
最高：50%；
}
用户名：
密码：
`在这里输入代码`
在这里输入代码

您可以使用css样式。这里有一些很好的答案！当然，这假设1）用户有一个支持

vh

的浏览器，2）表单本身正是

20vh

高…@NiettheDarkAbsol你是对的，但我不知道我的答案是如何获得否决票的。也许这不是最好的解决方案，但肯定不是一个坏答案。你应该使用标签，而不是类选择器来选择表单是的，你是对的。已对其进行编辑。此操作无效。请参见将此css添加到div宽度：50%；保证金：0自动；

 <div id="parent">
      <form method="post" id="child">
        <table align="center" cellpadding="2" cellspacing="2" border="0">
          <tr>
            <td>Username:</td>
            <td>
              <input type="text" name="username">
            </td>
          </tr>
          <tr>
            <td>Password:</td>
            <td>
              <input type="password" name="password">
            </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>
              <input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login">
            </td>
          </tr>
        </table>
      </form>
    </div>

#parent {
  width: 500px;
  height: 600px;
  background-color: gold;
  position: absolute;
  /*it can be fixed too*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /*this to solve "the content will not be cut when the window is smaller than the content": */
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}

#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


}

<div style="display: table; height:600px;">
<form method="post" style="display: table-cell; vertical-align: middle;">
    <table align="center" cellpadding="2" cellspacing="2" border="0">
        <tr>
            <td>Username:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login"></td>
        </tr>
    </table>
</form>
</div>

<style type="text/css">
    form
    {
        position: relative;
        top: 50%;
    }
</style>

<form method="post">
    <table align="center" cellpadding="2" cellspacing="2" border="0" >
        <tr>
            <td>Username:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>Password:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>`enter code here`
            <td><input type="submit" name="btnLogin" style="width:173px; height:40px;" value="Login"></td>
        </tr>
    </table>
</form>enter code here