[分享]css3把图片居中

CSS3提供了许多实用的布局属性，其中包括将图片居中显示的功能。具体实现方法如下：img { display: block; margin: 0 auto; } 首先通过display属性将图片转变成...

CSS3提供了许多实用的布局属性，其中包括将图片居中显示的功能。具体实现方法如下：

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

首先通过display属性将图片转变成块级元素，然后使用margin属性将左右外边距设为“auto”，即可实现水平居中。

如果仅需垂直居中，则可以借助flex布局实现：

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

将图片放在一个容器中，并使用flex布局让容器中的元素在水平和垂直方向上居中。需要注意的是，为了确保图片能够自适应容器大小，需要将图片的宽度和高度设置为最大值。

以上就是使用CSS3将图片居中的简单介绍，希望对读者有所帮助。