[分享]css中如何让图片在框的中间显示

CSS中有许多方法可以让图片在框的中间显示。下面我们来介绍一些常用的方法。

/* 方法1：使用absolute定位 */
.box {
  position: relative;
}
img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 方法2：使用flex布局 */
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

以上三种方法都可以让图片在框的中间显示。第一种方法是通过使用absolute定位，将图片的左上角顶点移动到框的中心点，再使用translate将图片居中显示。第二种方法是使用flex布局，在盒子里水平居中和垂直居中图片，这种方法比较简单易懂。第三种方法是通过使用text-align属性，将图片设置为行内块级元素，在盒子里居中显示。

需要注意的是，以上方法均适用于固定大小的图片。如果图片大小随着浏览器窗口大小的变化而变化，建议使用响应式布局或其他方法解决。