html 垂直剧中

在 HTML 中，可以使用 CSS 属性来实现垂直居中的效果。以下是一些常见的方法：

1. 使用 display:flex 布局

可以通过设置父元素的 display 属性为 flex，然后使用 align-items 和 justify-content 属性来实现垂直居中。例如：

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

2. 使用绝对定位

可以将子元素设置为绝对定位，并将 top 和 left 属性都设置为 50%，然后使用 transform 属性将其向上和向左移动自身高度和宽度的一半。例如：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 向上和向左移动自身高度和宽度的一半 */
}

3. 使用 table-cell

可以将父元素设置为 display: table，将子元素设置为 display: table-cell，并将 vertical-align 属性设置为 middle。例如：

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}