Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Oliver Sewell
Oliver Sewell
16,425 Points
Posted by Oliver Sewell
Oliver Sewell
16,425 Points

How would i make the inner circle positioned in the inner circle in the square

Hey! , just messing around in codepen , was wondering how would i get the inner circle to be positioned in the center of the circle and square

http://codepen.io/OliverSewell/pen/JYoxjr

thankyou in advance

2 Answers

akak
akak
29,446 Points
akak
akak
29,446 Points

Hey, If I'm allowed to change their order in HTML then I'd do it like that:

http://codepen.io/anon/pen/KdwJWz

Pete Cass
Pete Cass
16,656 Points
Pete Cass
Pete Cass
16,656 Points

Not quite sure i entirely understand your question. Do you want to center one element within the other? Akak's solution of setting top left bottom right all to 0 is a good one. An alternative it to set the top and left to 50% and then give a negative margin that is half the elements height and width respectively. eg 

.circle {

position: absolute;
top: 50%;
left:50%;
margin-right: -200px;  
margin-left: 200px;
// assuming your circle is 400px *400px.

}