使用CSS Flex布局实现登录界面居中对齐

在网页设计中，登录界面通常需要水平和垂直居中，以便用户更方便地进行登录操作。本文将介绍如何使用CSS Flex布局来实现登录界面的居中对齐。

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>登录</title>
<link rel='stylesheet' href='style.css'>
</head>
<body>
   <div id='login'>
    <h1>登录</h1>
    <form method='post' action='{{ url_for('login.html') }}'>
        <label>用户名：</label><input type='text' name='username'><br>
        <label>密码：</label><input type='password' name='password'><br>
        <input type='submit' value='登录'>
    </form>
    <a href='{{ url_for('index') }}'>返回</a>
   </div>
</body>
</html>

CSS代码

#login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

label {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

input[type='text'], input[type='password'] {
  display: inline-block;
  width: 200px;
  height: 30px;
  border: none;
  border-radius: 5px;
  padding: 5px;
}

input[type='submit'], a {
  display: block;
  width: 80px;
  height: 30px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  line-height: 30px;
  margin: 10px auto 0;
}

代码解释

Flex布局: display: flex; 将 #login 元素设置为flex容器，使其内部的元素可以使用flex布局。
水平居中: justify-content: center; 将flex容器内的元素水平居中对齐。
垂直居中: align-items: center; 将flex容器内的元素垂直居中对齐。
视口高度: height: 100vh; 设置 #login 元素的高度为视口高度，确保登录界面占据整个屏幕高度。
标签样式: label 样式设置标签的显示方式、宽度、文本对齐方式和右边距，使其与输入框对齐。
输入框样式: input[type='text'] 和 input[type='password'] 样式设置输入框的显示方式、宽度、高度、边框、圆角和内边距，使其看起来美观。
按钮样式: input[type='submit'] 和 a 样式设置登录按钮和返回链接的显示方式、宽度、高度、边框、圆角、背景颜色、文本颜色、文本对齐方式、行高和外边距，使其看起来像按钮。

通过以上CSS代码，即可实现登录界面的居中对齐以及用户名、密码、输入框和按钮的对齐。