How to center the center circle?

问题

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/

<div class="parent">
    <div class="middle">
        <div class="circle">
            <div class="circle"></div>
        </div>
    </div>
</div>

.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;}

回答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

回答2:

It isn't the perfect solution, but it works for me. The centering tags that SHOULD be used didn't change anything here, so I hope anyone will come with a better solution.

.circle .circle{
    width: 15px;
    height: 15px;
    margin-top: 15%;
}

回答3:

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

<div class="parent">
    <div class="circle">
        <div class="tiny_circle"></div>
    </div>
</div>

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;
}

来源：https://stackoverflow.com/questions/15427125/how-to-center-the-center-circle

标签

css3

vertical-alignment

centering

alignment