前端多个标签垂直居中怎么实现

有多种方法可以实现多个标签垂直居中，以下是其中几种常见的方式：

1. 使用flexbox布局

在容器上设置display:flex和align-items:center属性，可以使子元素在垂直方向上居中。

HTML代码：

<div class="container">
  <div class="item">标签1</div>
  <div class="item">标签2</div>
  <div class="item">标签3</div>
</div>

CSS代码：

.container {
  display: flex;
  align-items: center;
  flex-direction: column; /* 设置为垂直方向排列 */
  height: 100vh; /* 设置高度为视口高度 */
}

.item {
  margin: 10px; /* 设置间距 */
}

2. 使用table-cell布局

将容器的display属性设置为table，子元素的display属性设置为table-cell，再设置vertical-align:middle属性即可使子元素在垂直方向上居中。

HTML代码：

<div class="container">
  <div class="item">标签1</div>
  <div class="item">标签2</div>
  <div class="item">标签3</div>
</div>

CSS代码：

.container {
  display: table;
  height: 100vh; /* 设置高度为视口高度 */
}

.item {
  display: table-cell;
  vertical-align: middle;
  margin: 10px; /* 设置间距 */
}

3. 使用position和transform属性

将容器的position属性设置为relative，子元素的position属性设置为absolute，再使用transform属性将子元素向上移动一半高度即可使子元素在垂直方向上居中。

HTML代码：

<div class="container">
  <div class="item">标签1</div>
  <div class="item">标签2</div>
  <div class="item">标签3</div>
</div>

CSS代码：

.container {
  position: relative;
  height: 100vh; /* 设置高度为视口高度 */
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 10px; /* 设置间距 */
}

以上是三种常见的多个标签垂直居中的方法，您可以根据自己的实际需求选择适合自己的方法。