设置div中心并使其固定

Question

如何在屏幕/父div的中心设置一个div，并将其固定，这会在放置在中心后忽略宽度变化？我有一个包含表的div，它看起来像这样： 我不确定外部div是否必要。我希望我的桌子放在中心并固定，它会忽略它的宽度变化。以下结果是我得到的结果： 正如你所看到的，当桌子的大小改变时，桌子会向左移动，以便将桌子保持在中心位置，我想阻止这个，任何想法？ 这就是我到目前为止所做的：

.main
{
    position: relative;
    width: 600px;
    left: calc(50% - 300px);
    border: 1px solid #000;
}
.table
{
    margin: 0 auto;
}

<div class="main">
  <table class="table">
    <tr><td>Username: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
    <tr><td>Password: </td><td><input type="text"></td><td>ErrorMessage</td></tr>
  </table>
</div>

Answer 1

尝试在div中使用此样式，它适用于我，您可以在表格中使用帮助文本而不是它们。

<div style="text-align:center">
    <input/><br/><input/><br/><button/>
</div>

Answer 2

将您的位置更改为固定

position:fixed;

并重新对齐可能已经重新排列的左上角的其他div

Answer 3

为什么要使用桌子进行布局？表格应该用于数据输出或HTML邮件（如果我错了，请纠正我，但这就是我所知道的。）

此外，您可以将此代码用于垂直和水平居中的特定元素（请记住这是绝对的，但请随意玩这个）：

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

关于您希望错误消息不会造成表单宽度的事实。我建议使用绝对位置。

我为你写了一个例子https://jsfiddle.net/bdwte97g/ 希望这会有所帮助。

Answer 4

从.table中删除margin: 0 auto; 并把这条线 `{。表 位置：相对; 左：45％;

}`