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

在网页设计中，图片居中显示是很常见的需求，下面介绍一些CSS的技巧帮助实现图片在框的中间显示。/ 通过display:flex属性实现图片水平和垂直居中 / .box { display: flex;...

在网页设计中，图片居中显示是很常见的需求，下面介绍一些CSS的技巧帮助实现图片在框的中间显示。

/* 通过display:flex属性实现图片水平和垂直居中 */
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box img {
  display: block;
}

/* 通过absolute和transform属性实现图片水平和垂直居中 */
.box {
  position: relative;
}
.box img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 通过text-align和line-height属性实现图片水平和垂直居中 */
.box {
  text-align: center;
  line-height: 200px;
}

.box img {
  vertical-align: middle;
  display: inline-block;
} 

上述CSS技巧可以根据实际情况选择其中的一种或多种来实现图片居中显示。