HTML表单元素居中对齐：简洁易懂的CSS技巧

使用Flexbox轻松实现HTML表单元素居中对齐

想要让HTML表单元素（如用户名、密码输入框、注册按钮）在页面中完美居中？CSS中的Flexbox布局可以帮你轻松实现！

问题： 如何将用户名和密码输入框以及注册按钮在表单中居中对齐？

解决方案：

设置父元素为Flex容器： 将表单所在的父元素（例如<div id='register'>）的display属性设置为flex，并设置flex-direction为column，使其变为纵向的Flex布局。
水平和垂直居中： 为父元素设置align-items: center;实现水平居中，justify-content: center;实现垂直居中。
设置元素为块级元素： 将label和input元素的display属性设置为block，确保它们在同一行内居中对齐。
添加间距： 为注册按钮和返回按钮设置margin-top: 20px;，使其与上方的元素保持适当的间距，同时确保它们在同一列内。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>注册</title>
    <style>
        #register {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        label, input {
            display: block;
        }
        input[type='submit'], a {
            margin-top: 20px;
        }
    </style>
</head>
<body>
   <div id='register'>
    <h1>注册</h1>
    <form method='post'>
        <label>用户名：</label><input type='text' name='username'>
        <label>密码：</label><input type='password' name='password'>
        <input type='submit' value='注册'>
    </form>
    <a href='{{ url_for('index') }}'>返回</a>
   </div>
</body>
</html>

通过以上步骤，你就能轻松实现HTML表单元素的完美居中对齐，提升网页设计的专业度！