css中文字垂直居中命令

在CSS中，要实现文本的垂直居中，有几种常见的方法：

1. **`line-height` 属性**: 可以将元素的高度设置为行高，然后使用 `vertical-align: middle;` 将文本居中于行内。这种方法适用于块级元素，例如 `<div>` 或 `<p>`。

.container {
   height: 100px;
   line-height: 100px;
   vertical-align: middle;
}

2. **Flexbox** (弹性布局): 如果容器是 Flex 容器，可以使用 `align-items: center;` 属性来垂直居中内容。

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

3. **Grid** (网格布局): 类似地，对于 Grid 容器，可以使用 `align-self: center;` 属性。

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

4. **`position: absolute` 和 `transform`**: 对于绝对定位元素，可以先设置宽高，然后通过 `top: 50%; transform: translateY(-50%);` 实现垂直居中。

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