div内文字垂直居中

在HTML中，要让div内的文字垂直居中，可以采用几种常见的方法：

1. **CSS Flexbox**: 如果你的浏览器支持Flexbox，可以给包含元素设置`display: flex; justify-content: center; align-items: center;`，这样内容会在主轴和交叉轴上都居中对齐。

<div class="centered-text">
  这里是垂直居中的文本
</div>

<style>
.centered-text {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

2. **CSS Grid**: 类似于Flexbox，如果使用Grid布局，也可以将垂直居中作为样式之一。

<div class="centered-text">
  这里是垂直居中的文本
</div>

<style>
.centered-text {
  display: grid;
  place-items: center;
}
</style>

3. **使用CSS表单单元格** (表格布局)：如果你的页面布局更接近表格形式，可以利用`<table>`、`<tr>`、`<td>`等元素配合CSS来实现。

<table>
  <tr>
    <td style="vertical-align: middle;">
      这里是垂直居中的文本
    </td>
  </tr>
</table>

4. **传统方法：line-height 和 padding**：对于纯文本的居中，还可以设置`line-height`等于`height`，然后添加外部padding使边距与行高相匹配。

<div class="centered-text" style="line-height: 50px; padding-top: 25px;">
  这里是垂直居中的文本
</div>