CSS 垂直居中设置：使用 flex 布局轻松实现

<style scoped>
.container {
  width: 300px;
  margin: auto auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.form {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 10px;
}

input {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
<p>要实现垂直居中，可以使用 flex 布局。在 '.container' 类中添加以下 CSS 样式：</p>
<p>.container {
display: flex;
justify-content: center;
align-items: center;
}</p>
<p>这样可以使 '.container' 内的内容垂直居中显示。</p>