将表单与页面中心对齐

在设计网站时，经常会遇到需要将表单放置在页面中心的情况。这个过程很简单，只需要几行CSS代码就可以实现。

居中对齐表单

要将表单居中对齐，需要使用CSS的text-align属性。这个属性用于设置文本的对齐方式，但同样也适用于其他块级元素（比如表单）。将text-align设置为center即可将表单居中对齐。

form {
  text-align: center;
}

设置表单宽度

为了让表单以独立的块级元素的形式出现，并且在居中对齐时不会出现问题，需要给表单设置一个固定的宽度。

form {
  text-align: center;
  width: 400px; /* 根据实际情况设置宽度 */
}

设置表单元素宽度和间距

表单元素默认是块级元素，会占用一整行的宽度。要让表单元素在同一行上，并且保持一定的间距，可以使用display: inline-block属性来设置元素为内联块级元素。此外，还要给表单元素设置一个固定的宽度，并在元素之间添加间距。

form {
  text-align: center;
  width: 400px; /* 根据实际情况设置宽度 */
}

input[type="text"],
input[type="email"],
input[type="password"],
button {
  display: inline-block;
  width: 180px; /* 根据实际情况设置宽度 */
  margin: 10px; /* 根据实际情况设置间距 */
}

完整代码段

form {
  text-align: center;
  width: 400px; /* 根据实际情况设置宽度 */
}

input[type="text"],
input[type="email"],
input[type="password"],
button {
  display: inline-block;
  width: 180px; /* 根据实际情况设置宽度 */
  margin: 10px; /* 根据实际情况设置间距 */
}

结论

要将表单与页面中心对齐，只需要使用CSS的text-align属性将表单居中对齐，再设置一个固定的宽度和合适的间距即可。整个过程非常简单，只需要几行CSS代码即可搞定。