png icon with circle border - CSS - html

Question

I've got a PNG image icon with un-even sides (64px x 42px) and I'd like to create a circle border around it.
My html looks like this:
<span class="cat_circle">
<div class="cat_icon">
<img src="https://cdn.pbrd.co/images/GNK97WG.png">
</div>
</span>
I created a circle border around the image, but I just can't get the icon to the exact middle of the circle. The icon sits on the bottom right of the circle.
Here is my CSS for the circle border:
.cat_circle {
border: 3px solid #7E9CC2;
border-radius: 50%;
width: 25px;
height: 25px;
overflow: hidden;
position: absolute;
padding: 30px;
left: 10px;
top: 10px;
text-align: center;
vertical-align: middle;
}
I then started fiddling with the actual png image and I gave it negative margins like this:
.cat_icon {
margin-top: -10px;
margin-left: -18px;
}
I mean it seems to work and I have my icon in the middle of the circle, but is this the right way I should be approaching this??
Here is my fiddle: https://jsfiddle.net/ox0anvL7/

Answer 1

You can do that a lot simpler. I added three flexbox properties for the centering, but erased one HTML wrapper and quite a few of the (too complicated) CSS settings:
.cat_circle {
border: 3px solid #7E9CC2;
border-radius: 50%;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.cat_circle img {
width: 80%;
height: auto;
}
<span class="cat_circle">
<img src="https://cdn.pbrd.co/images/GNK97WG.png">
</span>

Answer 2

This is a pretty good way to do it. This works for all cases too when trying to center something inside a div.
It can be better than using flex as I believe that flex is only available in versions of IE 10 onwards (source here).
.cat_circle {
position: absolute;
display: inline-block;
border: 3px solid #7E9CC2;
border-radius: 50%;
width: 70px;
height: 70px;
}
.cat_circle img {
position: absolute;
top: 50%; left: 50%;
width: 80%;
transform: translate(-50%, -50%);
}
<span class="cat_circle">
<img src="https://cdn.pbrd.co/images/GNK97WG.png">
</span>

Answer 3

You Can Try this way !!
<div class="image-circle">
<div>
<img class="img" src="https://cdn.pbrd.co/images/GNK97WG.png">
</div>
</div>
.image-circle {
width:25%;
}
.image-circle:after {
content: "";
background: #4679BD;
padding-bottom: 100%;
border-radius: 50%;
display: block;
width: 100%;
height:0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.image-circle div {
float:left;
width:100%;
line-height:1em;
margin-top:-0.5em;
padding-top:40%;
text-align:center;
}

Answer 4

I'd suggest flexbox, simplifies and reduces the need of another class.
.cat_circle {
border: 3px solid #7E9CC2;
border-radius: 50%;
width: 25px;
height: 25px;
overflow: hidden;
position: absolute;
padding: 30px;
left: 10px;
top: 10px;
/* new */
display: flex;
justify-content: center;
align-items: center;
}
<span class="cat_circle">
<img src="https://cdn.pbrd.co/images/GNK97WG.png">
</span>