html盒子中上下4个对齐

在HTML中，如果你想让盒子元素在行内水平上居中并对齐其顶部和底部，你可以使用CSS来实现这个效果。这里有几种常见的方法：

1. **Flexbox** (弹性布局)：

.container {
  display: flex;
  justify-content: center; /* 居中内容 */
  align-items: center; /* 上下居中 */
}

在这个例子中，`.container` 包含的元素会自动在其可用空间内垂直居中。

2. **Grid** (网格布局)：

.container {
  display: grid;
  place-items: center; /* 同样达到上下居中 */
}

同样适用于网格容器内的元素。

3. **Positioning** 和 `line-height` 或 `vertical-align`：

.container {
  position: relative;
  line-height: 100%; /* 如果有内联元素 */
  display: inline-block; /* 对于块级元素 */
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将元素移动到父元素中心 */
}

这里需要将`.box` 的定位设置为绝对，并通过负的`top` 和 `left` 属性以及`transform` 来调整。