css如何让图片居中

可以使用以下方法使图片居中显示：

使用flex布局：将图片的父容器设置为display: flex，并添加justify-content: center和align-items: center属性。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container img {
  /* 可以添加max-width和max-height属性来控制图片的大小 */
  max-width: 100%;
  max-height: 100%;
}

使用position和transform属性：将图片的父容器设置position: relative，将图片设置为position: absolute，然后使用transform属性进行居中偏移。

.container {
  position: relative;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 可以添加max-width和max-height属性来控制图片的大小 */
  max-width: 100%;
  max-height: 100%;
}

使用表格布局：将图片的父容器设置为display: table，将图片设置为display: table-cell，并添加vertical-align: middle属性。

.container {
  display: table;
}

.container img {
  display: table-cell;
  vertical-align: middle;
  /* 可以添加max-width和max-height属性来控制图片的大小 */
  max-width: 100%;
  max-height: 100%;
}

以上是几种常用的方法，根据具体场景选择适合的方法即可。

鹏仔前端pjxi.com https://www.pjxi.com/