css文字垂直居中

CSS中将文字垂直居中通常有几种方法：

1. **line- 对于块级元素，设置`line-height`等于或略大于其高度，并使用`vertical-align: middle;`可以让内容在垂直方向上居中。例如：

     .vertically-centered {
       line-height: 100%; /* 或自定义值 */
       display: inline-block; /* 或table-cell */
       vertical-align: middle;
     }

2. **Flexbox**：
使用 Flexbox 可以很容易地实现文本垂直居中，只需给容器添加 `display: flex; justify-content: center; align-items: center;`：

   .flex-container {
     display: flex;
     align-items: center;
     justify-content: center;
   }

3. **Grid** (CSS Grid)：
类似 Flexbox，通过设置 `align-items` 和 `justify-items` 属性：

   .grid-container {
     display: grid;
     align-items: center;
     justify-items: center;
   }

4. **position 和 transform**：
如果需要对绝对定位元素进行垂直居中，可以使用 `position: absolute; top: 50%; transform: translateY(-50%);` 的组合：

   .positioned {
     position: relative;
     top: 50%;
     transform: translateY(-50%);
   }