css中图片与文子垂直居中

在CSS中，实现图片与文本垂直居中有多种方法，以下是其中几种常用的方法：

1. 使用Flexbox布局：
可以使用Flexbox布局来实现图片与文本的垂直居中。首先，将图片和文本包裹在一个容器中，然后使用以下CSS样式：

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

这样设置后，容器中的图片和文本将会垂直居中显示。

2. 使用表格布局：
另一种方法是使用表格布局。将图片和文本放置在一个表格单元格中，并设置单元格的垂直对齐方式为居中：

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

这样设置后，表格单元格中的内容将会垂直居中显示。

3. 使用绝对定位和transform属性：
还可以使用绝对定位和transform属性来实现垂直居中。首先，将图片和文本包裹在一个容器中，并设置容器的position属性为relative。然后，使用以下CSS样式：

.container {
  position: relative;
}

.image, .text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这样设置后，图片和文本将会相对于容器垂直居中显示。