css中怎么是图片居中显示图片

图片是网页设计中常用的元素，而如何让它居中显示呢？下面我们来介绍一下CSS中实现图片居中显示的几种方法。

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

  /* 方法二：使用position:absolute和margin:auto */
  .container{
    position:relative;
  }
  .container img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
  }

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

以上三种方法均可以实现图片居中显示。其中第一种方法使用了text-align:center将容器中的元素对齐方式设为居中。但需要注意的是，为了使图片水平居中，还需要给图片添加display:inline-block属性。

第二种方法则是使用了绝对定位及margin:auto的方法，其原理是将图片的左上角位置定位在容器的中心点（top:50%,left:50%），然后通过transform:translate(-50%,-50%)来使图片垂直和水平都居中显示。

第三种方法则是使用了flex布局同样可以实现图片居中显示。通过将容器的display属性设置为flex，然后使用justify-content和align-items属性分别设置主轴和交叉轴方向上的对齐方式为居中，就可以使图片在容器中居中显示。

不同的项目中需求不同，以上三种方法都可以根据实际情况做出调整使用。以上介绍的就是CSS中实现图片居中显示的方法。希望对大家有所帮助！