如何用两个按钮垂直填充整个屏幕

要实现用两个按钮垂直填充整个屏幕，可以使用CSS的Flexbox布局来实现。以下是一种可能的解决方案：

HTML代码：

<div class="container">
  <button class="button">按钮1</button>
  <button class="button">按钮2</button>
</div>

CSS代码：

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.button {
  width: 200px;
  height: 50px;
  margin: 10px;
}

解释：

1. 首先，设置HTML和body元素的高度为100%，以确保容器可以占据整个屏幕高度。
2. 创建一个包含两个按钮的容器div，并给它一个自定义的类名"container"。
3. 在CSS中，使用Flexbox布局来实现垂直居中对齐。设置容器的display属性为flex，flex-direction属性为column，这样按钮就会垂直排列。
4. 使用justify-content属性设置主轴上的对齐方式为居中，align-items属性设置交叉轴上的对齐方式为居中，这样按钮就会在容器中垂直居中对齐。
5. 给按钮添加一些样式，如宽度、高度和外边距，以使它们看起来合适。

这样，两个按钮就会垂直填充整个屏幕，并且在屏幕中垂直居中对齐。