如何使这个表格在大屏幕上居中？答案

【问题标题】：How to center this form on large screen?如何使这个表格在大屏幕上居中？
【发布时间】：2017-01-04 05:29:09
【问题描述】：

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

这是我的 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 和它的所有子元素在所有类型的屏幕上居中？

【问题讨论】：

请在较小的屏幕上发布当前居中该行的 css sn-p。
你想要垂直居中吗？
@DeepakBandi 不，我想垂直居中

标签： html css position

【解决方案1】：

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

添加：

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

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

【讨论】：

【解决方案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>

【讨论】：