如何使桌子居中？ [复制]

Posted 2023-03-05

【中文标题】如何使桌子居中？ [复制]

【英文标题】：How to center table? [duplicate]

【发布时间】：2016-05-19 08:51:05

【问题描述】：

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

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

如下图：

【问题讨论】：

您可以为此使用 css 样式。

有一些很好的答案！

【参考方案1】：

<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

【参考方案2】：

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

【讨论】：

这不起作用。见screenshot

将此css添加到div宽度：50%；边距：0 自动；

【参考方案3】：

首先，您可以阅读其他一些不错的答案： CSS tricks, ***

在这里你可以通过 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

【参考方案4】：

为此，您需要 css。试试这个

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

或者你可以试试这个

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

【讨论】：

你应该使用标签，而不是表单的类选择器

是的，你是对的。已经编辑过了。

【参考方案5】：

相对于屏幕垂直对齐的最简单方法是使用vh 测量值，如下所示：

form
  position: relative;
  top: 40vh;

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

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

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

【讨论】：

当然这假设 1) 用户有一个支持 vh 的浏览器和 2) 表单本身正好是 20vh 高...

@NiettheDarkAbsol 你是对的，但我不明白我的回答是如何得到反对的。也许这不是最好的解决方案，但绝对不是一个糟糕的答案。