CSS按钮中图片居中
在实际开发中，我们经常会使用CSS按钮来帮助我们界面的设计。常规的CSS按钮一般由背景颜色、边框、字体颜色和字体等元素组成。但是，如果我们需要在按钮中加入一张图片，如何让图片在按钮中居中呢？
在这篇文章中，我们将会为你介绍一种在CSS按钮中让图片居中的方法。
首先，我们需要准备好一个CSS按钮的模板。以下是一个我们将在本文中使用的示例CSS按钮代码:

.btn {
display: inline-block;
padding: 10px 20px;
background-color: #5cb85c;
color: #fff;
text-align: center;
border-radius: 3px;
font-size: 24px;
font-weight: bold;
}

现在我们在这个模板中添加一个图片元素。以下是我们添加图片后的按钮代码：

.btn {
display: inline-block;
padding: 10px 20px;
background-color: #5cb85c;
color: #fff;
text-align: center;
border-radius: 3px;
font-size: 24px;
font-weight: bold;
position: relative;
}
.btn img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在这里，我们为按钮添加了一个相对定位position: relative;，这是为了给图片元素提供相对的定位基准点。
然后，我们给图片元素创建了一个绝对定位position: absolute;，这会将图片从文档流中移除，使其能够在按钮中自由移动。
接着，我们使用top: 50%;left: 50%;将图片元素移动到按钮中央，但是图片自身是以左上角为基准点的，所以图片现在会超过按钮，我们需要使用transform: translate(-50%, -50%);将图片向上向左移动图片本身宽高的一半，这样就可以确保图片完全居中了。
现在，我们已经有了一个CSS按钮和一个位于其中心的图片。通过这种方法，您可以轻松地在CSS按钮中添加和居中图片。希望这个小技巧对您有所帮助！