如何把表单居中且每一行对齐

您可以使用CSS的flexbox布局来实现表单居中且每一行对齐。具体实现方法如下：

1. 在表单的父元素上设置display: flex;和flex-direction: column;，使其成为一个垂直方向的flex容器。

2. 在表单的父元素上设置align-items: center;，使其子元素在交叉轴上居中对齐。

3. 在表单的每一行元素上设置display: flex;和justify-content: space-between;，使其成为一个水平方向的flex容器，并且每个元素在主轴上均匀分布。

示例代码如下：

HTML:

<div class="form-container">
  <div class="form-row">
    <label for="name">姓名：</label>
    <input type="text" id="name">
  </div>
  <div class="form-row">
    <label for="email">邮箱：</label>
    <input type="email" id="email">
  </div>
  <div class="form-row">
    <label for="phone">电话：</label>
    <input type="tel" id="phone">
  </div>
</div>

CSS:

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-row {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-bottom: 10px;
}

label {
  width: 30%;
  text-align: right;
  margin-right: 10px;
}

input {
  flex: 1;
}

这样就可以实现表单居中且每一行对齐的效果了。