css中文字图片垂直居中显示

CSS中文字图片垂直居中显示是一个常见的需求，特别是在设计网站时。

要实现垂直居中，我们需要先了解几个CSS属性：

/* 父元素必须设置高度 */
.parent {
  height: 200px;
  display: flex; /* 显示为Flex布局 */
  justify-content: center; /* 子元素水平居中 */
  align-items: center; /* 子元素垂直居中 */
}
.child {
  width: 100px;
  height: 100px;
}
.child img {
  vertical-align: middle; /* 使图片垂直居中 */
} 

上面的代码演示了如何使用Flex布局使子元素垂直居中，其中`justify-content`和`align-items`用于水平和垂直方向上的对齐，这里我们设置为`center`即可使子元素水平和垂直方向上都居中。

值得注意的是，如果子元素中包含图片，需要使用`vertical-align: middle`属性来使图片垂直居中。

以上就是CSS中文字图片垂直居中显示的基本方法，如果您对CSS垂直居中还不够熟悉，可以继续了解一下flex布局中的其它用法。