css 图片居中

要在 CSS 中将图片水平和垂直居中，可以使用以下方法：

方法一：使用 flexbox

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

在上面的示例中，将包含图片的容器元素的 display 属性设置为 flex，然后使用 justify-content 和 align-items 属性将其水平和垂直居中。

方法二：使用绝对定位和 transform

.container {
  position: relative;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在上面的示例中，将包含图片的容器元素的 position 属性设置为 relative，然后使用 position、top、left 和 transform 属性将图片绝对定位并居中。

方法三：使用 text-align 和 vertical-align

.container {
  text-align: center;
}

img {
  display: inline-block;
  vertical-align: middle;
}

在上面的示例中，将包含图片的容器元素的 text-align 属性设置为 center，然后将图片的 display 属性设置为 inline-block 并使用 vertical-align 属性将其垂直居中。

这些方法中的任何一个都可以将图片水平和垂直居中，具体取决于您的布局需求和个人喜好。