[分享]css中如何定义让图片居中

CSS中定义让图片居中需要用到以下两种方法：

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

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

方法一通过设置容器的text-align属性为center，再将图片的display设置为inline-block，使得图片水平居中。这种方法只能对单张图片起作用，并且只限于水平居中。

方法二则使用了flex布局，将容器的宽高都设为100%，同时使用flex的justify-content和align-items属性，使其水平和垂直都居中。图片的margin属性设置为auto，则会使其自动水平和垂直居中，达到效果。