HTML表单元素居中对齐的CSS技巧

HTML表单元素如何居中对齐？

想让你的HTML表单看起来更美观、专业？将表单元素（如用户名、密码、按钮等）居中对齐是一个不错的选择。本文将介绍如何使用CSS实现这一目标。

Flex布局（Flexible Box Layout）是CSS的一种强大的布局方式，可以轻松实现元素的水平和垂直居中。

将表单容器设置为Flex容器:

#register {
  display: flex;
  flex-direction: column; /* 设置元素排列方向为垂直 */
  align-items: center;    /* 设置元素在交叉轴上居中 */
}

这段代码将 #register 元素转换为Flex容器，并将内部元素垂直排列，同时在水平方向上居中。

将标签和输入框居中对齐:

label, input {
  display: block;   /* 将标签和输入框设置为块级元素 */
  margin: 10px 0; /* 设置上下外边距 */
  text-align: center; /* 设置文本居中 */
}

这段代码将标签(<label>)和输入框(<input>)设置为块级元素，并设置文本居中。

将按钮和链接居中对齐:
```
input[type='submit'], a {
  display: block;
  margin: 10px 0;
  text-align: center;
}
```
这段代码将提交按钮和链接也设置为了块级元素，并居中显示。

通过以上简单的CSS代码，我们可以轻松地将HTML表单元素居中对齐，从而提升表单的视觉效果和用户体验。