Sorry if silly question but in the above CSS step I was messing around with position and margin, trying to understand them a bit better. Using position: absolute with margin:auto vertically centers the div? If I change to position:relative the div only centers horizontally. I have tried searching but all I can find is using margin:auto only horizontally centers. Why does postion: absolute effect this?
Thanks
The following is a great web page that explains all the different ways to center something horizontally and vertically:
In answer to your question, no, margin: auto will not center vertically. That only works for horizontal centering (e.g. margin: 0 auto).
Also, if you use position: absolute on an element then even the margin auto trick above won’t work for centering horizontally. Absolute positioning takes the element out of the natural flow and thus you are entirely responsible for positioning it (i.e. you don’t get to rely on auto margins).
Hi @baconsoft!
Welcome to the forum!
For the future, If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
Thank you.
To center vertically using relative and absolute positioning you can check this example:
<style>
#father {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 50%;
transform: translate(50%, -50%)
}
</style>
<div id="father">
<div id="son">
</div>
</div>
On this, you have a parent div “father” and a child div “son”. The “father” div needs to have a position: relative and the “son” a position: absolute. After that, you can use the top and transform properties to center the “son” div horizontal and vertically.
Thanks for your reply, sorry I forgot about the Ask for Help button, will use in the future, havent needed help so far!
@bbsmooth, thanks for your reply and for your link. Now Im a bit confused! Why does the code below vertically center the div? Its the default code for the exercise. If I change to position:relative, the box only centered horizontally. Thought I understood position, obviously not! 
.center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 0px;
box-shadow: 25px 10px 10px 10px green;
}
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
Thanks for posting the CSS. Well that’s a new one on me. I guess you really do learn something new everyday. I had no idea that top/bottom auto margins would vertically center an absolutely positioned element if the height was set and both top and bottom were set as well. Or if I did know that at one time then I had forgotten.
As to why vertical centering doesn’t work if you change it to relative positioning, I believe it’s because relative positioning still treats the element as if it is in its normal flow, and in that case, top/bottom auto margins don’t work for vertically centering.
I am going to post the challenge here so other commenters can see the context for the css.
Thanks for the replies everyone, just learning, im sure ill get the format right with one of my posts!
Still trying to figure this one out. Is this just a quirk of absolutely positioned elements having margin:auto and top, bottom, right, left being set to 0?? Is it something to do with Flex? im just curious…
So, I threw this into codepen and messed around with the code a bit. When I deleted the top,bottom,left, right values and added them back in one by one it went from the upper top left corner to the exact middle. I did some digging around online and found a discussion that mentioned the same thing.
Here is one of the responses:
using margin:auto; along with left:0; and right:0; is an auto centering method
FCC probably centered everything because the actual challenge is to create a moon shape and they probably wanted the result to be in the middle.
I am definitely not a css expert but hope that helps a little.