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

To center the small circle within the big one simply use this on .circle .circle:

margin-top: 7px;

You align the inner circle horizontally using margin: auto. To get this thing vertically centered calculate the top margin as the size of the outer circle is fixed too. Its basically like this:

( outer circle (height) - inner circle (height + 2 x border) ) / 2
( 50 - 15 + 10 + 10 ) / 2 = 7.5px

Try before buy

First answer

Solves to center the small circle within the big one even if the big one gets bigger

If the the size of parent increases, the big circle should scale and the small one should stay small and in the middle. Is that correct? Then this could work - try to change the parent's width:

Demo

[Try before buy](http://jsfiddle.net/UhBLC/]

HTML

CSS

.parent{
    display: table; 
    margin: 50px auto;
    background: lightgray;
    height: 200px;
    width: 200px;
}

.circle {    
    display: table-cell;
    vertical-align: middle;
    background: blue;
    border-radius: 50%;
    opacity: 0.3;
    width: 100%;
    height: 100%;
}

.tiny_circle {
    margin: auto;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: red;
}