CSS - Circle won't fit in center of another

Question

I can't make one circle center inside another.

I can't understand whats wrong. I have also tried doing it with a square, and that wont work too.

.circle {
    width: 170px;
    height: 170px;
    border-radius: 85px 85px 85px 85px;
    background: lime;
}
.circle-inner {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
border-radius: 75px 75px 75px 75px;          
background: red;

In addition to the comments below - here's an alternative, http://jsfiddle.net/evanbriggs/x7dz0sxm/ . Create a larger circle, add some padding, and have the child circle fill the remaining space. If you want a smaller circle, just up the padding on the parent and the child would adjust accordingly. — Evan, Aug 12 '14 at 18:43

score 2 · Accepted Answer · answered Aug 12 '14 at 18:35

2

You could give same size to both containers and add a padding to the wrapper like padding:10px;. DEMO. It is the most simple way i think of.

.circle {
    width: 150px;
    height: 150px;
    padding:10px;
    border-radius: 85px 85px 85px 85px;
    background: lime;
}

answered Aug 12 '14 at 18:35

G-Cyrillus

101,410
14
105
129

@Paulie_D yep, this is an easy way too, unblured box shadow would do too :).there's many ways :) , as display:flex and margin:auto; too http://jsfiddle.net/e2a8or58/12/ – G-Cyrillus Aug 12 '14 at 20:13

score 0 · Answer 2 · 2014-08-12T18:38:36.090

0

Add this to your code for your inner circle:

position:relative;
top:10px;

Note that you can also make your code a lot cleaner by using shorthand:

Change border-radius: 75px 75px 75px 75px; into border-radius: 75px; The same goes for .circle

edited Aug 12 '14 at 18:38

answered Aug 12 '14 at 18:30

Thanks, but can you explain why margin dosen't work verticaly? – user3854743 Aug 12 '14 at 18:37
In .circle and .circle-inner you have not used margin vertically. Take a look this http://www.w3schools.com/css/css_boxmodel.asp – Aug 12 '14 at 18:42
1

You cannot use `margin-top:auto` and `margin-bottom:auto` to centre a div vertically because these values are defaulted at zero, even if your div has a height. Check this out for more info: http://stackoverflow.com/questions/12415661/using-marginauto-to-vertically-align-div – ctwheels Aug 12 '14 at 18:43
1

@ctwheels , margin:auto; works in the flex model configuration : http://jsfiddle.net/e2a8or58/12/ (if browser understands : display:flex;) – G-Cyrillus Aug 12 '14 at 20:17

score 0 · Answer 3 · answered Aug 12 '14 at 18:37

0

Change your CSS to this: Make your circles same size and add padding to containing circle

/*My css*/

            .circle {
                width: 150px;
                height: 150px;
                border-radius: 50%;
                background: lime;
                padding:20px;
}

answered Aug 12 '14 at 18:37

Jake Ferrante

28
1
5

20px is twice too much ;) – G-Cyrillus Aug 12 '14 at 18:38
Oh, my bad, haha. I didn't see your answer! kms Also, you're right - just an example of how it works~ – Jake Ferrante Aug 12 '14 at 18:40

score 0 · Answer 4 · answered Aug 12 '14 at 18:39

0

Here's another option using:

.circle-inner {
    margin: auto;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

http://jsfiddle.net/John_C/x683mtbh/

answered Aug 12 '14 at 18:39

John_C

1,116
8
17

CSS - Circle won't fit in center of another

4 Answers4