css h1垂直居中

在CSS中，要实现`h1`元素的垂直居中，可以通过多种方法来完成，具体的方法取决于你使用的是块级元素还是内联元素。以下是一些常见的实现方式：

1. 使用Flexbox布局：

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中（如果需要） */
  height: 100px; /* 父容器需要一个明确的高度 */
}

<div class="parent">
  <h1>标题内容</h1>
</div>

2. 使用Grid布局：

.parent {
  display: grid;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中（如果需要） */
  height: 100px; /* 父容器需要一个明确的高度 */
}

<div class="parent">
  <h1>标题内容</h1>
</div>

3. 使用绝对定位和transform属性：

.parent {
  position: relative;
}
.h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent">
  <h1 class="h1">标题内容</h1>
</div>

4. 使用表格布局：

.parent {
  display: table;
  height: 100px; /* 父容器需要一个明确的高度 */
}
.h1 {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

<div class="parent">
  <h1 class="h1">标题内容</h1>
</div>

选择哪种方法取决于具体的布局需求和个人偏好。通常，Flexbox和Grid是现代布局中最推荐的方法，因为它们的兼容性好，且功能强大。