This is my first post in dev.to 😀
Here, we are going to talk about how margin: 0 auto; works
let's consider the div(.inner-div) element inside another div(.outer-div) element
margin: 0 auto;
Actually the inner-div has an auto value for both margin-left and margin-right properties.
These auto values align the inner-div in the center position of outer-div.
Because the inner-div exactly has a 25px on margin-left and 25px on margin-right.
Why 25px? 🤔
The outer div has a 100px width. The Inner-div has a 50px width;
Remaining width(total margin values of left and right) = 100 - 50 = 50px;
marginLeft = marginRight = 50/2 = 25px;
So, We conclude the formula as 😜
Total margin values of left and right = parent element width - child element width marinLeft = marginRight = Total margin values of left and right/2
Therefore, .inner-div is centered.
Note: margin: 10px auto: also centers the element, but it will take 10px on top as well as the bottom. So, the left and right auto values will
make the center position.