0 auto value in Margin

Question

How does auto actually know where the center is?

Answer

As we all have guessed, auto is for automatic, so when CSS reads it in a value, it adjusts the property automatically according to the surrounding space of the element (in the case of margin). For example, having:

margin: 0 auto;

As we remember sets the four sides of the element in pairs, the first pair (top and bottom) will have zero margin while the second pair( right and left) will have an automatic margin which means that the width of our element (as well as the right and left measurements of padding and border, if any) will be subtracted from the container element’s width. The leftover space will be divided into two equal parts and assigned to the margin on the right and the left providing us with a horizontally centered element.

16 Likes

If I am following the explanation correctly, this means if I want to centre a box vertically, I should be able to do so by setting a height and then writing

margin: auto 0;

Is that correct, or did I misunderstand something?

6 Likes

Did you try it? In practice we seldom consider vertical centering unless we can be 100% certain the document will fit into the device viewport. Then, and only then might we devise a means of vertical centering by applying our own literal (not auto) margins or using position and offsets that can be calculated from the page height.

6 Likes

What would be a good practice trying to center vertically the h1 from the “banner” ID on the background image? I’d like something more practical (or standard compliant) than knowing that the background image height is 700px and coding my top: 300px.

3 Likes

Please provide some context. Do you have some markup and CSS for us to examine and reflect upon? Is this a lesson (if so post a link to it in a reply)?

As mentioned early, it’s not really a best practice concern, though there could be several other considerations to take into account. From the beginning of computers entering the mainstream, usability was at the forefront of concerns.

Designers want a view, users want to perform a task. How something looks can have a bearing in user’s selectivity. A good example would be the colors we use on buttons and where we place important page elements. A/B testing has been used extensively for decades to arrive at the level of usability the web has today. This is the stuff to learn, right now. From it you can determine if what you have in mind is something you might want to reconsider.

A bit oblique, I suppose, but it stresses how best practices are arrived at. For my purposes, best practice means writing well-formed HTML that validates; writing CSS that validates and seeks to be trim and slim; writing JS that does something important that CSS cannot do. In time you will discover from style guides and other documentation what are the biggest offenders and how to avoid them in your writing/coding. From this you will eventually arrive at your own list of best practices that may well overlap others’. There is some subjectivity, even in the objective pursuit.

10 Likes

Oh sure. It makes perfect sense, maybe I’m getting a bit ahead of my own level here and asking questions that only practicing a bit more can answer but I appreciate your feedback.

About my question, the white header is almost on the top of the box model (image) but I want it centered vertically on it. Lets suppose that we can ensure that the image will be displayed as we expect it to be, how can i vertically center in reference to the image?

the current code looks like this:

#banner .content h1 {
border: 3px solid white;
position: relative;
top: 50px;
width: 400px;
margin: 0 auto;
}

4 Likes

It looks like I fell into a newbie trap there: I was carried away by the (seeming) brilliance of a purely rules-based deduction, rather than considering the practical need for the effect the piece of code has first.

makes mental note Thanks for reminding me!

mtf

    March 19

tewie3019:
margin: auto 0;

Is that correct, or did I misunderstand something?

Did you try it? In practice we seldom consider vertical centering unless we can be 100% certain the document will fit into the device viewport. Then, and only then might we devise a means of vertical centering by applying our own literal (not auto) margins or using position and offsets that can be calculated from the page height.

3 Likes

Try playing with the top: property. Perhaps 250px.

3 Likes

That’s not true - in practice we often do want to center things vertically in web design.

It is an unfortunate anachronism of CSS that centering things vertically has historically been difficult, not that we don’t want to do it.

Advice for the OP: look up flexbox and use align-items: center;

4 Likes

I do not understand quite well why it needs to be lower than the width of the chunk parent in this case is body, plus, why when I put to a extremely lower width it goes to the right? It will be a great help if you explain me what is the real behavior of the relationship between width and margin, great day.

This is a late comment but, without playing with the code myself…

Does it always seem to align to the right regardless of the width of the element? Have you tried playing with the text-align property and centering it that way?

It looks like the <h1> is technically centered based on the output in the dev tools but I don’t know what the default text-alignment value is for CSS. I would imagine it’s left, but maybe it’s right??? :man_shrugging: