具有绝对位置的css的定心形式

Question

我正在尝试将此表格居中

这是我的CSS：

form {
  background-color: yellow;
  width: 400px;
  position: absolute;
  text-align: center;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
}

如果我放弃绝对位置，表格将居中，但是如果我移除绝对位置，则会发生以下情况

似乎无法弄清楚。

Answer 1

position: absolute 将元素从流程中删除。

如果您想申请 margins ，则需要使用 position: relative ：

form {
  background-color: yellow;
  width: 400px;
  position: relative;
  text-align: center;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
}

<form>Form</form>

如果必须使用绝对定位的元素，则可以结合使用 left 和 calc() 来抵消元素由50%减去其 width 的一半：

form {
  background-color: yellow;
  width: 400px;
  position: absolute;
  text-align: center;
  margin-top: 5rem;
  left: calc(50% - (400px/2));
}

<form>Form</form>

Answer 2

将display: inline-block;添加到form。并用div（或其他display: block;元素）包装，然后将text-align: center添加到div。

这样，您将使它居中，没有硬编码的值。如果您的div宽度不同，它将自动居中。

div {
  margin-top: 40px;
  text-align: center;
}

form {
  background-color: red;
  display: inline-block;
}

<div>
  <form>
    input: <input/> <br>
    other: <input/> <br>  
    <button>SUBMIT</button>
  </form>
</div>