css中怎么让元素垂直居中显示

CSS 中的 vertical-align 属性可以帮助我们让元素在垂直方向上居中。

在让元素垂直居中之前，我们需要注意以下几点：

• 应该设置元素的高度和行高为相同的值。
• 应该使用 inline-block、table-cell 或者 flex 等布局方式。
• 垂直居中的元素必须有父元素。

以下是几种实现垂直居中的方法：

line-height 方法

一个简单的办法是将父元素的 line-height 属性设置为与父元素相同的高度。这将把行内元素（像文本）垂直居中。

.parent {
  height: 200px;
  line-height: 200px;
}

.child {
  display: inline-block;
  vertical-align: middle;
} 

table-cell 方法

使用 display: table-cell 可以使行内元素或块级元素在父元素内部居中。

.parent {
  display: table-cell;
  height: 200px;
  width: 200px;
  text-align: center;
  vertical-align: middle;
}

.child {
  display: inline-block;
  vertical-align: middle;
} 

flexbox 方法

使用 display: flex 可以轻松地实现元素的水平和垂直居中。

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

.child {
  display: inline-block;
  vertical-align: middle;
} 

以上就是一些常见的实现垂直居中的方法，可以根据实际情况进行选择。