Margin auto not working
in the picture below, blue box is my root div container inside the body. it is the only body child.(react app).
- the root div is flex with flex direction column. justify content and align items is set to center
- red is a main element with flex grow 1. it spans the whole height of the root div container. red box is NOT a flex container itself, but has a margin set to auto to center it horizontally and vertically. yes i know i can use justify content and align items on the root, but this is my setup right now.
- yellow box is a div which contains stuff denoted with green. it has its margin set to auto, just like its parent(main).
Since yellow box has its margin set to auto, i woul expect it to be vertical aligned. however that is not the case. Does it somehow ignore its parent(main), which is a flex child of the root div? please dont tell me how to change the css. i want to understand WHY this behavior occurs. thanks in advance. here is the codepen: https://codepen.io/pmevo/pen/KKGbpNM
19 Replies
@pm1992 please don't cross post and ask for people to check your thread, it's against the #📝rules (specifically the last part of number 2)
sorry
it'll make answering your question a lot easier if you can share your code instead of just a screenshot. There's probably some rule buried somewhere that's causing this, but no one can see that in a screenshot. You can make an example in a codepen (https://pen.new) or even just share the resulting HTML and CSS from your app in code blocks (#How To Ask Good Questions has instructions)
@jochemm thanks. got it https://codepen.io/pmevo/pen/KKGbpNM
margin-top and margin-bottom are set to 0 when you use auto, in the w3 spec for CSS https://www.w3.org/TR/CSS21/visudet.html#normal-block
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.
that doesnt justify the behavior. wait what
hold up
fine. heres the same pen with flex-grow: 0. main is now centered vertically. https://codepen.io/pmevo/pen/KKGbpNM
you asked why
margin: auto didn't center vertically, that's because in the spec the top and bottom margins are set to 0 when you use auto
not sure what you mean with this and the next two messagessure. but now margin: auto DOES center it vertically
meaning it sets a margin, or not?
because it's a flex child and not just a block level element
flex is centering, margin is doing nothing wait, not actually true
i am not touching justify content
but it is because it's a flex item, that changes the behavior
i went through the calculated properties but the display is set to block
i realise it is a flex item, sure
so that means that flex children(direct ones) can use margin: auto for block direction?
wish i could see this in a property that explains it
looks like, yeah. though I'd still use justify-content over margin:auto just for legibility
yes, i know, but i was trying to understand why 🙂
the common pattern for aligning a div horizontally is doing margin: 0 auto ive seen in examples. why do they use 0 for the block value and not just omit it? since it is set to 0 anyway
margin: 0 auto == margin: auto
it's set to 0 in some circumstances, not in all, so if you're just looking to center horizontally, you're better off being explicit
it seems that it has to do with this rule: https://www.w3.org/TR/css-flexbox-1/#main-alignment
and this one https://www.w3.org/TR/css-flexbox-1/#item-margins
thanks. to answer your question. i use a root container for my react app. this root container serves 2 or more different views where the main elements' layout differs. i wanted to keep the root element as universal as possible to avoid using classes on it, which led me to expleriment with the margin value and observe that behavior since i was trying to align the main without flex's justify content on the container level
ah, that makes sense
css isnt that complicated once you keep a few basic rules in mind. in this case i was completely ignoring that it sets the block margin to 0px
thanks for helping out.
no problem, glad we figured it out!