css 上下居中

要将元素在垂直方向上居中，可以采用以下几种方法：

1.使用 flexbox 布局：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

2.使用绝对定位：

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

3.使用 table 布局：

.container {
  display: table;
}

.element {
  display: table-cell;
  vertical-align: middle;
}

4.使用 line-height 属性：

.container {
  height: 100px;
  line-height: 100px;
}

.element {
  display: inline-block;
  vertical-align: middle;
}