div 内的文字上下居中

要让 `<div>` 中的文字垂直居中，有几种常见的方法：

1. **Flex布局** (适用于现代浏览器):
如果容器是块级元素（比如 `display: flex;`），可以使用 `align-items: center;` 属性使其内部内容上下居中：

   <style>
     .centered-div {
       display: flex;
       align-items: center;
       justify-content: center; /* 也可用于水平居中 */
     }
   </style>

   <div class="centered-div">
     文字在这里
   </div>

2. **Grid布局** (同样适用于现代浏览器):
对于网格容器（`display: grid;`），使用 `align-items: center;` 和 `justify-items: center;`：

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

   <div class="centered-div">
     文字在这里
   </div>

3. **内联块元素**:
如果你想保留原始行内特性，可以先将其转换为内联块元素，然后添加 `line-height` 相同于高度的样式：

   <div style="display: inline-block; line-height: 100%; vertical-align: middle;">
     文字在这里
   </div>

确保容器的高度已被设置。

4. **Positioning** (兼容性较差):
旧版本的IE可能需要使用绝对定位配合top/bottom为0，但这种方法不推荐使用：

   <div style="position: relative; line-height: normal;">
     <span style="position: absolute; top: 50%; transform: translateY(-50%);">文字在这里</span>
   </div>

以上都是实现 `<div>` 内文字上下居中的常用技巧，具体选择哪种取决于你的项目需求和浏览器兼容性。