```markdown

如何让图片与文字垂直居中

在网页设计中，常常需要将图片与文字垂直居中对齐，这样可以提高页面的美观性和用户体验。本文将介绍几种常用的方法来实现图片与文字的垂直居中。

方法一：使用 Flexbox

Flexbox 是一种现代的布局方式，可以轻松实现元素的居中对齐。使用 Flexbox 来让图片和文字垂直居中是非常简单的。

示例代码：

```html

这里是文字

```

解释：

• display: flex; 设置容器为 Flexbox 布局。
• align-items: center; 垂直居中对齐容器中的元素。
• justify-content: center; 水平居中对齐容器中的元素。
• height: 100vh; 设置容器高度为视口高度，以便垂直居中能够生效。

方法二：使用 Grid 布局

CSS Grid 布局也是一个非常强大的布局工具，可以实现元素的精确对齐。

示例代码：

```html

这里是文字

```

解释：

• display: grid; 设置容器为 Grid 布局。
• place-items: center; 使容器中的元素在水平和垂直方向上都居中。
• height: 100vh; 设置容器的高度为视口高度。

方法三：使用垂直居中的传统方法

如果需要兼容旧版浏览器或者不想使用 Flexbox 或 Grid，可以使用传统的 line-height 和 vertical-align 方法。

示例代码：

```html

这里是文字

```

解释：

• height: 100px; 设置容器的高度。
• line-height: 100px; 使容器的行高等于高度，从而实现文本的垂直居中。
• vertical-align: middle; 将图片和文字都垂直居中对齐。

总结

以上三种方法都可以有效地实现图片与文字的垂直居中。使用 Flexbox 或 Grid 布局是最推荐的现代方法，它们更加灵活且易于管理。而传统方法虽然兼容性较好，但代码相对较为繁琐。在实际开发中，根据项目的需求选择合适的方案即可。 ```