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

在css中，实现图片水平居中的方法有多种。以下是其中几种方法：

/* 方法一：使用text-align属性 */ 
.container{
  text-align: center;
}
.container img{
  display: inline-block;
}

/* 方法二：使用margin属性 */
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container img{
  margin: 0 auto;
}

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

以上三种方法各有优缺点。第一种方法使用text-align属性实现，简单易懂，但需要将图片设置为inline-block才能居中。第二种方法使用margin属性，需要将父元素设置为display:flex，较为灵活，但需要记住将margin-top和margin-bottom设置为0。第三种方法使用transform属性，可以实现更加精准的居中效果，但需要将父元素设置为position:relative。