CSS居中图像

在Web设计和开发中，图像的定位和对齐是一个重要的问题。通过CSS，我们可以轻松地定位和对齐图像的位置。

水平居中图像

要使图像水平居中，我们可以使用CSS的 text-align 属性。将该属性应用于包含图像的父容器，即可实现水平居中。例如：

.container {
  text-align: center;
}

.img {
  display: inline-block;
}

在上面的代码片段中，.container 是包含图像的父容器，并且 text-align 属性设置为 center。此外，.img 是图像本身，并使用 display: inline-block 使其在容器中以其实际大小呈现。

垂直居中图像

要使图像垂直居中，我们可以使用CSS的 vertical-align 属性。将该属性应用于图像本身，并将其值设置为 middle。

.container {
  height: 500px;
  line-height: 500px;
}

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

在上面的代码片段中，.container 被设置成一个有固定高度的块元素，并且 line-height 属性的值设置为该高度，以确保内容垂直居中。将图像的 vertical-align 属性设置为 middle 使其在容器中垂直居中。

居中图像——综合运用

最后，要同时水平和垂直居中图像，我们可以将上述两种方法结合起来。

.container {
  height: 500px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

在上面的代码片段中，.container 使用了一个 display: flex 容器，并将 justify-content 和 align-items 属性都设置为 center。

这样就能够同时水平和垂直居中图像了！

总结

通过 CSS，我们可以很容易地将图像水平和垂直居中。使用 text-align 和 vertical-align 属性以及 display: flex 容器可以让我们轻松达到这个目标。