css的图片居中显示图片 |css设置不透明度

img {
display: block;
margin: 0 auto;
}

上面的代码是让图片居中显示的最简单的方式。首先，使用display属性将图片设置为块级元素，然后设置margin属性的左右值为auto即可实现图片水平居中。

需要注意的是，这种方法只适用于图片本身没有超出其父元素宽度的情况。如果图片宽度超出容器宽度，图片将会撑满容器并且显示在容器的左侧。

如果需要在图片超出容器时仍然保持居中显示，可以使用以下代码：

.container {
display: flex;
justify-content: center;
}
.container img {
margin: auto;
max-width: 100%;
height: auto;
}

使用布局方式为flex的容器，将内容水平居中。然后，图片的margin属性设置为auto，max-width设置为100%（HTML中的img标签默认情况下不会超过容器的宽度），height设为auto。这样即可实现图片居中显 示，而不管图片是否超出容器宽度。

总之，使用CSS让图片居中显示是十分简单的，只需通过设置display属性和margin属性值，就可以实现图片水平居中。如果需要处理图片超出容器宽度的情况，可以使用flex布局来实现居中显示。希望这篇文章可以帮助你更好地掌握CSS图片排版的技巧。