CSS 图片居中：两种方法实现水平和垂直居中

可以使用以下两种方法将图片居中：

1. 使用 CSS 的 text-align 属性将图片水平居中

可以将图片包裹在一个容器元素中，然后设置该容器元素的 text-align 属性为 center。如下所示：

<div class='container'>
  <img src='image.jpg' alt='Image'>
</div>

.container {
  text-align: center;
}

2. 使用 CSS 的 flexbox 布局将图片水平和垂直居中

可以将图片包裹在一个容器元素中，然后使用 CSS 的 flexbox 布局将图片水平和垂直居中。如下所示：

<div class='container'>
  <img src='image.jpg' alt='Image'>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}