css中图片水平居中对齐代码

CSS中，图片的水平居中对齐是常见的需求。本文将介绍如何使用CSS代码实现图片的水平居中对齐。 首先，我们需要确定对齐的容器。例如，我们想要将一张图片水平居中对齐在一个div容器中。HTML代码如下：

<div class="container">
  <img src="example.png">
</div>

接下来，我们需要在CSS中设置该容器的样式，并在其中使用flexBox布局。以下是实现水平对齐的代码：

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

这段代码将容器设置为flex布局，并使用justify-content属性将其水平中心对齐。该属性有多个取值，这里我们使用了center来让容器水平居中对齐。使用align-items属性设置其垂直居中对齐，此处我们也使用了center属性。 这段代码同时适用于不同宽度的图片，因为其使用了flexBox布局，它会自动调整布局中的元素位置。 使用上述代码后，我们就能实现容器中的图片水平居中对齐了。希望这篇文章对你有所帮助。