在 div 内垂直对齐 h1 - CSS

在前端开发中我们常常需要对网页元素进行布局，特别是在处理网页文字时，经常需要将文字水平居中或者垂直居中。本文将介绍如何在 div 内垂直对齐 h1 标签的方法。

方法一：使用 Flexbox

Flexbox 是一种强大的 CSS 布局方式，可以很灵活地控制子元素的排列方式。借助 Flexbox，可以让子元素垂直居中。

div {
  display: flex;
  align-items: center;
}

在上面的代码中，flex 属性用来让 div 变成一个 Flex 容器。align-items 属性用来设置子元素垂直方向的对齐方式，这里设置为居中对齐。使用上述代码可以实现 h1 标签在 div 内垂直居中对齐。

方法二：使用 line-height 属性

line-height 属性用于设置行高，也可以用来让一个元素垂直居中。我们可以先设定 div 内的 line-height 值等于 div 的高度，再让 h1 元素的 line-height 等于 div 的高度。

div {
  height: 200px;
  line-height: 200px;
}

h1 {
  line-height: inherit;
}

在上面的代码中，div 的高度为 200px，line-height 值也为 200px，这使得 h1 标签可以占满 div 的高度。而 h1 的 line-height 值继承自父元素 div，实现了垂直居中。

方法三：使用 position 和 transform 属性

第三种方法利用 position 属性和 transform 属性实现。

div {
  position: relative;
}

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

在上面的代码中，我们给 div 设置了相对定位，再让 h1 绝对定位并且设置 top 属性为 50%，这样 h1 就会处于 div 高度的中央位置。再通过 transform: translateY(-50%) 将 h1 向上平移 50% 的高度，达到垂直居中的效果。

总结：以上是三种常用方法，其中第一种方法灵活性更高，也更为推荐。