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

在CSS中，将图片居中的方法有很多种。以下是其中的几种常用方法：

/* 方法一：使用text-align属性将图片居中 */
img {
  display: block;
  margin: 0 auto;
  text-align: center;
}

/* 方法二：使用position和transform属性 */
img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 方法三：使用flex布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container img {
  width: 50%;
  height: auto;
} 

以上代码中，第一种方法使用了text-align属性，将图片居中对齐。其中display: block将图片转为块级元素，margin: 0 auto让图片水平居中对齐，text-align: center让图片垂直居中对齐。

第二种方法使用了position和transform属性，将图片水平和垂直都居中。其中position: absolute将图片脱离文档流，left: 50%将图片左边框与父级元素左边框对齐，top: 50%将图片上边框与父级元素上边框对齐，transform: translate(-50%, -50%)将图片向左和向上平移一半宽度和高度，使图片水平和垂直都居中。

第三种方法使用了flex布局，将父级元素设为flex容器，使子元素（即图片）实现水平和垂直居中。其中display: flex将父级元素设为flex容器，justify-content: center将子元素水平居中对齐，align-items: center将子元素垂直居中对齐，width: 50%和height: auto设置图片的宽度和高度。