Question

<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>

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

如下图所示：

Answer 1

你需要css。试试这个

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

或者你可以试试这个

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

Answer 2

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

在这里你可以通过CSS 3来实现：

<强> HTML

 <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>

和 CSS ：

#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%);


}

Fiddle

Answer 3

相对于屏幕垂直对齐的最简单方法是使用vh这样的测量：

＆＃13;

form{
  position: relative;
  top: 40vh;
}

＆＃13;

<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>

＆＃13;

请注意，并非所有浏览器都支持这些测量单位。

另一种方法是使用相对于父元素高度的百分比;

Answer 4

<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>

Answer 5

b = [[y if y == max(x) else 0 for y in x] for x in a ]

如何中心表？

5 个答案: