CSS中如何实现垂直居中对齐

CSS中实现垂直居中对齐，主要有以下几种方法：

1. 使用绝对定位

在父元素上设置position:relative，在子元素上设置position:absolute，top和left属性设置为50%，使用transform:translate(-50%,-50%)将元素向上和向左移动50%，实现垂直居中对齐。代码示例如下：

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

2. 使用flex布局

在父元素上设置display:flex，设置justify-content:center，align-items:center，实现父元素的水平居中对齐和垂直居中对齐。代码示例如下：

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

3. 使用table布局

在父元素上设置display:table，在子元素上设置display:table-cell，vertical-align:middle，实现垂直居中对齐。代码示例如下：

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

4. 使用grid布局

在父元素上设置display:grid，在子元素上设置align-self:center，justify-self:center，实现垂直居中对齐和水平居中对齐。代码示例如下：

.parent {
  display: grid;
}
.child {
  align-self: center;
  justify-self: center;
}

5. 使用line-height

设置父元素的line-height属性等于子元素的高度，实现垂直居中对齐。代码示例如下：

.parent {
  line-height: 100px;
}
.child {
  height: 100px;
}

6. 使用margin

设置子元素的margin-top和margin-bottom属性为auto，实现垂直居中对齐。代码示例如下：

.child {
  margin-top: auto;
  margin-bottom: auto;
}

7. 使用transform

设置子元素的transform属性为translateY(-50%)，实现垂直居中对齐。代码示例如下：

.child {
  transform: translateY(-50%);
}

以上就是CSS中实现垂直居中对齐的几种方法，根据不同的情况选择适合的方法即可。