表单元素垂直居中完美解决方案

表单元素垂直居中一直是前端开发中常见的难点，但我们可以使用一些技巧来达到这个效果。

以下是表单元素垂直居中的完美解决方案：

方案一：使用flex

使用flex布局可以很容易地实现表单元素垂直居中。

具体步骤如下：

1. 父元素设置display:flex; align-items:center;，表示垂直居中；
2. 表单元素设置margin:auto;，表示水平居中。

示例代码：

<div class="form">
  <input type="text">
  <button>提交</button>
</div>
<style>
  .form {
    display: flex;
    align-items: center;
  }
  input, button {
    margin: auto;
  }
</style>

方案二：使用绝对定位

我们可以使用绝对定位的方式来实现表单元素垂直居中。

具体步骤如下：

1. 父元素设置position:relative;，使绝对定位的元素相对于父元素定位；
2. 表单元素设置position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);，表示垂直居中和水平居中。

示例代码：

<div class="form">
  <input type="text">
  <button>提交</button>
</div>
<style>
  .form {
    position: relative;
    height: 200px;
  }
  input, button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
</style>

以上两种方案都可以实现表单元素垂直居中，你可以根据需要选择使用其中一种。