[分享]css中如何让img居中显示

CSS中如何让img居中显示呢？有时候我们在设计网页时需要让图片在页面居中显示，无论是水平居中还是垂直居中都是很有用的技巧。/ 水平居中 / img { display: block; margin:...

CSS中如何让img居中显示呢？有时候我们在设计网页时需要让图片在页面居中显示，无论是水平居中还是垂直居中都是很有用的技巧。

/* 水平居中 */
img {
  display: block;
  margin: 0 auto;
}

/* 垂直居中 */
.container {
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

首先，在CSS中实现水平居中最简单的方法是把img标签的display属性设置为block，并使用margin属性来给img标签的左右两侧都添加相同的外边距值。其中，margin: 0 auto; 表示左右外边距都为auto，即自动调整，并且将左右外边距值都设为相等，这样图片就可以在父元素中水平居中了。

而实现垂直居中则需要先将img的父级元素设置为相对定位（position:relative;），然后将img标签设置为绝对定位（position:absolute;）。接下来，设置top值为50%，这将把img标签移动到它的容器中间。然后，请注意，还需要使用CSS3的transform属性来将img标签上移50%，以便完全垂直居中。

在这个示例中，.container是img的父级元素。您可以将其替换为您的容器类名称，以确保CSS在正确的元素上正常工作。