[分享]css3按钮图片居中

CSS3的出现让我们开发网页变得更加轻松，其中一个很常用的功能就是在按钮上添加图片。但是当图片尺寸和按钮尺寸不一样时，我们发现，图片会一直往上顶，不会居中。那么，我们该如何让图片在按钮内居中呢？.bt...

CSS3的出现让我们开发网页变得更加轻松，其中一个很常用的功能就是在按钮上添加图片。但是当图片尺寸和按钮尺寸不一样时，我们发现，图片会一直往上顶，不会居中。那么，我们该如何让图片在按钮内居中呢？

.btn {
  width: 100px;
  height: 50px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
} 

首先，我们给按钮设置了宽度和高度，并设置了背景色。

接着，在按钮上使用了flex布局，并将其justify-content和align-items都设置为center，来实现在容器内居中。

最后，针对图片，我们设置了max-width和max-height都为100%，让图片按比例缩放，并使用object-fit: contain，来让图片适应容器大小，并保持其宽高比。

这样，我们就可以轻松地实现图片在按钮内居中了。