等文本容器中。只需要在容器上应用text-align: center;样式即可。

优点：

• 简单易用，只需添加一行CSS代码。
• 兼容性好，几乎所有现代浏览器都支持。

缺点：

• 仅适用于图片周围有文本的场景。如果图片是孤立的或被其他非文本元素包围，则无法使用此方法。

2. 使用CSS的margin属性

通过给图片设置左右外边距为自动（margin-left: auto; margin-right: auto;），可以实现在无文本环绕的情况下居中图片。

优点：

• 适用于任何情况，包括图片周围无文本的场景。
• 可以与width属性结合使用，以控制图片的宽度。

缺点：

• 需要为每个图片单独设置样式，不够灵活。
• 可能出现布局上的微小偏差。

3. 使用Flexbox布局

Flexbox提供了更为灵活的布局方式，可以轻松实现图片居中。通过将父容器设置为display: flex;和justify-content: center;，可以实现居中效果。

优点：

• 布局灵活，可与其他Flexbox特性结合使用。
• 兼容性好，支持现代浏览器。
• 可以轻松地控制图片的垂直位置。

缺点：

• 需要对父容器进行额外的样式设置。
• 可能导致意外的布局问题，特别是在复杂的布局中。

4. 使用Grid布局（CSS Grid）

CSS Grid是一种二维布局系统，可以轻松实现图片居中。通过将父容器设置为display: grid;和place-items: center;，可以实现居中效果。