How to center the center circle?

Question

How to center the center circle (CSS only)?   [Assume latest CSS3 browser support.]

Must maintain v/h centering when parent w/h changes dynamically.

Answer 1

You need to give your middle container, appropriate padding,It will help bringing the content to the center.

You can achieve the same by giving a left i.e. making your .middle as:

.middle {
    vertical-align: middle;
    text-align:center;
    left:10%;
    position:relative; /*makes left effective*/
    display:table-cell;
}

Also, you have to give your child div.circle a specific width and height combined with border-radius to align it and to give it a shape of circle.

And finally you need to play with the margin of the inner circle to align it.

see this fiddle