CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）

在CSS中，文本的垂直和水平对齐可以通过不同的属性来实现。以下是一些常用的方法：

1. 文本垂直对齐：

   使用vertical-align属性可以对行内元素或表格单元格中的元素进行垂直对齐。

.vertical-align-middle {
  vertical-align: middle;
}

2. 文本水平对齐：

   可以使用text-align属性来设置文本的水平对齐方式。

.text-center {
  text-align: center;
}

3. 单行文本垂直居中：

   可以通过设置等于容器高度的行高(line-height)来实现。

.line-height-container {
  line-height: 50px; /* 假设容器高度是50px */
}

4. 多行文本垂直居中：

   可以使用Flexbox或Grid布局来实现。

Flexbox示例：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中，可选 */
  height: 100px; /* 容器高度 */
}

Grid示例：

.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 100px; /* 容器高度 */
}

以上代码示例展示了如何使用CSS对文本进行垂直和水平对齐。根据具体情况选择合适的方法。