[分享]css3怎么控制图片居中显示图片

在CSS3中，通过使用display属性将图片作为块级元素来控制图片的居中显示。当图片是块级元素时，可以使用margin属性来控制其水平和垂直居中。 img { display: block; mar...

在CSS3中，通过使用display属性将图片作为块级元素来控制图片的居中显示。当图片是块级元素时，可以使用margin属性来控制其水平和垂直居中。

img {
    display: block;
    margin: auto;
} 

如果想要控制图片的大小，可以使用width和height属性。如果想要保持图片的纵横比例，可以只设置width或者height，另一个属性的值会自动计算。

img {
    display: block;
    margin: auto;
    width: 50%;
} 

如果想要让图片在父元素中居中，可以通过设置父元素的text-align属性来实现。例如，如果父元素是一个div，则可以通过以下方式来实现图片在div中水平居中的效果。

div {
    text-align: center;
}
img {
    display: inline-block;
} 

除了上述方法外，CSS3还提供了一种新的方法来控制图片的居中显示，即使用flexbox布局。通过设置父元素的display为flex，可以将子元素进行伸缩，从而实现图片的居中显示。

div {
    display: flex;
    justify-content: center;
    align-items: center;
}
img {
    flex: none;
} 

总的来说，CSS3提供了多种方法来控制图片的居中显示。通过使用上述方法，可以让图片在浏览器中更加美观和易于阅读。