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. Would the experimental CSS Box Model spec help here? Thanks. http://jsfiddle.net/dragontheory/VdJFa/5/ ```

.parent {display: table; margin: 50px auto; background: lightgray; height: 100px; width: 100px;} .middle {display: table-cell; vertical-align: middle;} .circle {margin: auto; border: solid 10px blue; border-radius: 50%; opacity: 0.3; width: 50px; height: 50px;} .circle .circle {width: 15px; height: 15px;} ```

Accepted Answer

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

How to center the center circle?

Solution

Problem