div内的文字设置垂直居中

在HTML和CSS中，要实现`div`内的文字垂直居中，可以通过多种方法来完成，下面介绍一种常见的方法：

1. 使用Flexbox布局：

.parent {
  display: flex; /* 启用flex布局 */
  align-items: center; /* 垂直居中子元素 */
  justify-content: center; /* 水平居中子元素 */
  height: 100px; /* 设置父元素的高度 */
}

.child {
  /* 子元素（div中的文字）将自动垂直和水平居中 */
}

<div class="parent">
  <div class="child">这里是需要垂直居中的文字</div>
</div>

2. 使用表格布局：

.parent {
  display: table;
  width: 100%;
  height: 100px; /* 设置父元素的高度 */
}

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

<div class="parent">
  <div class="child">这里是需要垂直居中的文字</div>
</div>

3. 使用绝对定位和变换：

.parent {
  position: relative;
  height: 100px; /* 设置父元素的高度 */
}

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

<div class="parent">
  <div class="child">这里是需要垂直居中的文字</div>
</div>