img center, round and center in a div - html

Question

I am stack with a css issue.
I would like my picture center in a div (the red one) with a size 50% of the div and also perfectly round...
here is my html code :
<ion-content class="masters">
<ion-row>
<div class="profil-img">
<img src="../../assets/img/tennis-club.jpeg" alt="">
</div>
</ion-row>
</ion-content>
here is my css code :
.profil-img img{
border-radius: 50%;
border: 3px solid white;
// position:absolute;
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.profil-img{
border: 2px solid black;
}
and here the result :
Thank you for the help!

Answer 1

I've tried out many things and now i got a solution.Could this solve your Problem?
.red {
position: relative;
width: 250px;
height: 250px;
background-color: #f00;
border: 2px solid #000;
}
.profil-img {
position: relative;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translateY(calc(-50% - 3px)) translateX(calc(-50% - 3px));
border: 3px solid #fff;
overflow: hidden;
}
.profil-img > img {
display: block;
position: absolute;
width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%) translateX(-50%);
}
<div class="red">
<div class="profil-img">
<img src="https://cdn.transportbox-katzen.de/wp-content/uploads/2016/03/katze-gewohnheitstier.jpg" alt="">
</div>
</div>

Answer 2

For perfectly round image, you have to specify the same width and height for the image.
.profil-img img{
border-radius: 50%;
border: 3px solid white;
display: inline-block;
height:200px;
width: 200px;
margin: 0 auto;
vertical-align: middle;
}
If you want the image to be centered vertically and horizontally, you may try the following:
.profil-img img{
border-radius: 50%;
border: 3px solid white;
display: inline-block;
position:relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height:200px;
width: 200px;
}
Please let me know if it worked for you.