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

Question

我正在构建一个带有我想居中的表单的页面，但是我无法使用 auto 来实现填充或边距（尽管我给了表单一个固定的宽度）。

这是我的 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>

我正在使用骨架网格系统，我有一个代表 row 的父级 div 并且有两个子级：两者都有 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 并且所有子项都集中在所有类型的屏幕上？

Answer 1

~~您必须删除 legend/fieldset 上的宽度：~~

添加：

* {
  box-sizing: border-box;
}

这包括每个元素宽度中的填充和边框。您总是可以 select 只有表单及其元素。

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

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

Answer 2

给你，去掉宽度

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

更新

如果你想让它垂直居中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
        .parent{
            height: 100vh;// give your height here
        }
        .child-wrapper{
            position          : relative;
            top               : 50%;
            -webkit-transform : translateY(-50%);
            -ms-transform     : translateY(-50%);
            transform         : translateY(-50%);
            display           : table;
            margin            : 0 auto;
        }
        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;
        }

        </style>
    </head>
    <body>
        <div class = "parent row">
            <div class="child-wrapper">
                <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>
    </body>
</html>

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

How to center this form on large screen?

html

css

position