1. 在HTML中添加一个登录表单，使用CSS将表单居中。
2. 在表单中添加一个居中按钮，使用CSS将按钮居中。
3. 在按钮的点击事件中，使用CSS调整表单和按钮的布局。
下面是一个示例代码，用于将登录表单居中：
<!DOCTYPE html>
<html>
<head>
<title>登录表单居中</title>
<style>
.login-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0 auto;
</style>
</head>
<body>
<div class=”login-container”>
<form>
<label for=”username”>用户名：</label>
<input type=”text” id=”username” name=”username” required>
<label for=”password”>密码：</label>
<input type=”password” id=”password” name=”password” required>
<button type=”submit”>登录</button>
</form>
</div>
</body>
</html>
在上面的示例代码中，大家使用`display: flex`来将容器设置为 Flexbox，并使用`flex-direction: column`来将垂直方向设置为居中。然后，大家使用`align-items: center`和`justify-content: center`来将元素居中。最后，大家使用`height: 100vh`来设置容器的高度，并将其设置为 100% 以获取父容器的高度，从而使整个登录表单都居中。
除了使用Flexbox，大家还可以使用其他布局技术来将元素居中，如Grid、 absolute 布局等。选择哪种布局技术取决于具体需求和样式偏好。