How to vertically center image in this responsive, flippable circle? - html

Question

In a Rails 3.2 app I am displaying user avatars using a responsive, flippable CSS circle. But due to padding needed on a parent element, the avatar is not centered in the circle.
How can I center this circle? Where possible, I would prefer to keep this semantically marked up with an img tag, rather than as a background image on a div.
Also, can this be optimized? I've a lot of nested divs at present!
The code is below, and a jsfiddle here.
<div class='responsive-container'>
<div class='responsive-inner'>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flip-inner">
<div class="front">
<div class="circle">
<div class="circle-inner">
<%= image_tag #user.avatar %>
</div>
</div>
</div>
<div class="back">
<div class="circle">
<div class="circle-inner">
<%= #user.name %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.responsive-container{
position: relative;
width: 50%;
}
.responsive-container:before{
content: "";
display: block;
padding-top: 100%;
}
.responsive-inner{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.flip-container {
perspective: 1000;
-webkit-perspective: 1000; /* Safari and Chrome */
}
/* flip the pane when hovered */
.flip-container:hover .flip-inner, .flip-container.hover .flip-inner {
transform: rotateY(180deg);
-ms-transform:rotateY(180deg); /* IE 9 */
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
}
.flip-inner {
transition: 0.6s;
-webkit-transition: 0.6s; /* Safari */
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d; /* Safari and Chrome */
position: relative;
}
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
-ms-backface-visibility:hidden; /* Internet Explorer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
-ms-transform:rotateY(180deg); /* IE 9 */
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
}
.circle {
width: 100%;
height: 0;
padding: 50% 0; //padding top & bottom must equal width
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
overflow: hidden;
border: 1px #000 solid;
}
.circle-inner {
display: table;
width:100%;
}
.circle-inner img {
height: auto;
width: 100%;
}
.circle-inner p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>

Answer 1

why dont you use border-radius instead of circle? will be much easier i think.
http://bavotasan.com/2011/circular-images-with-css3/