html - 如何在父div中居中表单？

Question

在我的表单中，标签/输入与 float 和固定宽度对齐。因此，我的标签有空白，这使得很难将表单居中放置在父 div 中。

我怎样才能使这个表单居中？

#Form1Layout {
  font-family: Verdana;
  font-size: 10pt;
  margin-top: 10px;
  text-align: center;
  padding: 10px;
}

#Form1Layout label {
  text-align: right;
  padding-right: 10px;
  width: 80px;
}

#Form1Layout input {
  width: 300px;
}

#Form1Layout label,
#Form1Layout input {
  display: block;
  float: left;
  margin-bottom: 10px;
}

#Form1Layout br {
  clear: both;
}

<div>
  <div id="Form1Layout">
    <label>User name:</label><input type="text" /><br>
    <label>Address:</label><input type="text" /><br>
    <label>Phone:</label><input type="text" /><br>
    <label></label><button class="My_Button">Submit</button>
  </div>
</div>

Answer 1

为此使用 flexboxes。这是一个简单的例子。

(我故意增加输入的高度来向您展示它是如何工作的)。

#Form1Layout {
  font-family: Verdana;
  font-size: 10pt;
  margin-top: 10px;
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#Form1Layout > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 6px 0;
}

#Form1Layout label {
  text-align: right;
  padding-right: 10px;
  width: 80px;
}

#Form1Layout input {
  width: 300px;
  height: 80px;
}

<div>
  <div id="Form1Layout">
    <div><label>User name:</label><input type="text" /></div>
    <div><label>Address:</label><input type="text" /></div>
    <div><label>Phone:</label><input type="text" /></div>
    <div><label></label><button class="My_Button">Submit</button></div>
  </div>
</div>