弹性盒子上下居中

可以使用 CSS 的 Flexbox 布局来实现弹性盒子的上下居中。

具体实现方法如下：

1. 在弹性盒子的父元素上设置 display: flex;，将其设置为弹性容器。

2. 设置弹性容器的 flex-direction 属性为 column，使弹性盒子内的项目在垂直方向上排列。

3. 设置弹性容器的 justify-content 属性为 center，使弹性盒子内的项目在水平方向上居中。

4. 设置弹性容器的 align-items 属性为 center，使弹性盒子内的项目在垂直方向上居中。

示例代码如下：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px; /* 弹性容器的高度 */
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

HTML 代码：

<div class="container">
  <div class="box"></div>
</div>

这样，就可以实现弹性盒子的上下居中了。