html - 如何在大屏幕上将此表格居中？

我正在建立一个要居中的表单页面，但是我无法实现自动填充或边距设置（尽管我给表单提供了固定宽度）。

这是我的HTML结构：

<div class = "parent row">
    <div class = "child1 row">
        <form>
            <legend>
                Inputs goes here
            </legend>
            <legend>
                Inputs goes here
            </legend>
        </form>
    </div>
    <div class = "child2 row">
        <form>
            <legend>
                Inputs goes here
            </legend>
            <legend>
                Inputs goes here
            </legend>
        </form>
    </div>
</div>

我正在使用骨架网格系统，并且我有一个父div，它代表一个row，并且有两个孩子：两者都有一个带有fieldset的形式。

我尝试给它们中的每一个赋予固定的宽度，并使用padding-auto和margin-auto，但这没有用。

这是样式代码（使用SCSS）：

form{
  max-width: 400px;
  min-width: 250px;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
}
legend,fieldset{
  border: 1px grey solid;
  max-width: 400px;
  padding: 0 25%;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  h4{
    background-color: $primary-blue-color;
    color: white;
    margin-bottom : 40px;
  }
  input{
    margin: 5px;
  }
}

在小屏幕上，父div居中，但在大屏幕上则没有。它以标准方式对齐（从左开始）。

如何使该div及其所有子级集中在所有类型的屏幕上？

最佳答案

您必须删除图例/字段集的宽度：

加：

* {
  box-sizing: border-box;
}

这包括每个元素的宽度中的填充和边框。您始终可以仅选择表单及其元素。

* {
  box-sizing: border-box;
}

form {
  max-width: 400px;
  min-width: 250px;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
}

legend,
fieldset {
  border: 1px grey solid;
  max-width: 400px;
  padding: 0 25%;
  margin-left: auto;
  margin-right: auto;
  width: 350px;

  h4 {
    background-color: $primary-blue-color;
    color: white;
    margin-bottom: 40px;
  }

  input {
    margin: 5px;
  }

}

<div class="parent row">
  <div class="child1 row">
    <form>
      <legend>
        Inputs goes here
      </legend>
      <legend>
        Inputs goes here
      </legend>
    </form>
  </div>
  <div class="child2 row">
    <form>
      <legend>
        Inputs goes here
      </legend>
      <legend>
        Inputs goes here
      </legend>
    </form>
  </div>
</div>

更新：删除这些代码段使其正常工作：

关于html - 如何在大屏幕上将此表格居中？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41452047/