[分享]css中怎样将图片居中显示

在CSS中，居中对齐图片是一个常见的需求，下面我们来看几种方法。

/* 方法一：使用text-align */
.container{
  text-align: center;
}
.container img{
  /* 必须inline-block才能被text-align居中 */
  display: inline-block;
}

/* 方法二：使用margin */
.container{
  /* 让容器成为弹性盒子，便于子元素居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.container img{
  /* 设置一个负的margin值，使图片居中 */
  margin: -10px;
}

/* 方法三：使用定位 */
.container{
  position: relative;
}
.container img{
  position: absolute;
  left: 50%;
  top: 50%;
  /* 设置负的margin值，使图片居中 */
  margin-left: -50px;
  margin-top: -50px;
} 

以上就是三种常用的方法，具体可以根据实际需求进行选择。值得注意的是，这些方法只适用于图片宽高固定且知道大小的情况下，如果图片大小不固定，需要使用JavaScript等动态计算。