[分享]css3怎么把图片居中

CSS3内置了一些用于对图片进行对齐和位置控制的属性，只要使用一些简单的代码，就可以轻松地将图片居中。img { display: block; margin: 0 auto; } 以上代码将设置di...

CSS3内置了一些用于对图片进行对齐和位置控制的属性，只要使用一些简单的代码，就可以轻松地将图片居中。

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

以上代码将设置display属性为block，这将使图片成为块级元素。此外，margin属性可以为左右自动居中，而垂直方向上也可以使用其他属性进行对齐。

如果你想将图像限制在容器中，可以使用以下代码：

.container {
  position: relative;
  overflow: hidden;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

container类必须设置为relative，以便使其成为相对的容器，而overflow属性将切断图像的溢出部分。图像自身使用了绝对定位，并使用了50%的top和left值。最后一个transform属性用于在垂直方向和水平方向上相应地进行平移。

使用这些简单的代码，你就可以将图像更好地放置在你需要的位置。