In CSS, the margin: auto; or margin: 0 auto; is a very popular technique to center align HTML elements horizontally within their parent container.
Originally, the margin property is designed to control the space around an element’s boundaries(outside borders). But many times we use it with the value auto to center align block-level elements such as divs, paragraphs, lists, etc.
Now you can ask yourself if the margin property controls the space around HTML elements how can it center align things? Well, that is actually the magic of the value auto and in this article we will discuss it in detail.
Understanding Margin Auto
To set the margins of an element, the margin property takes its value in CSS length units such as px, em, rem, cm, %, etc.
But except for these values, the margin property does also accept a special value auto. The value auto means that the browser will automatically calculate the margin for the element based on its context.
So when you set the margin of an element to auto, you actually tell the browser to determine the margin for the element. The browser automatically finds out the appropriate value of the margin and places the element on the layout accordingly.
But how does the browser gets to know how much margin it has to give to the element? For that, the browser first checks how much space(width) the element will take up within its containing element and then checks how much space will be remaining.
If there is any remaining space after placing the element within its parent, then the browser splits this remaining space equally between the left and right margins of the element.
This means the space on the left of the element will be the same as the space on the right. This causes the element to be pulled to its center horizontally.
For example, let’s suppose we have a div element with its width as 30%. Now, if we set its margin to auto, the remaining 70% space will be equally divided between its left and right margins i.e both margins will be set to 35% and therefore the element will be horizontally centered.
<body>
<div>Horizontally centered</div>
</body>
Add the CSS:
div{
width: 30%;
margin: auto; /* Center align */
padding: 20px;
background-color: springgreen;
}
In the above example, we have set the width of the div to 30%, therefore, 70% space will be unoccupied.
But as we have set the margin of the div to auto, therefore, the remaining 70% space will be equally divided between the left and right margins which will pull the element into the center of its parent(<body> here) horizontally.
Using auto with margin-left and margin-right
As the margin property is a shorthand for the margin-top, margin-right, margin-bottom and margin-left properties, therefore when we set the margin to auto, we actually set all four sides of the margin of the element to auto.
So, if we explicitly set the margin-left and margin-right to auto instead of setting the margin to auto, this will also give you the same result i.e. the element will be center aligned horizontally.
<body>
<div>Horizontally centered</div>
</body>
Add the CSS:
div{
width: 30%;
margin-left: auto;
margin-right: auto;
padding: 20px;
background-color: springgreen;
}
Output:
Right Align with margin-left: auto;
If you set only the margin-left of an element to auto, the element will be pulled to the right side of its containing element.
That’s because when you set the margin-left to auto, the browser checks if there is any space available inside the containing element. If yes, it assigns all this available space to the margin-left and therefore the element is pulled to the right side.
<body>
<div>Right Aligned</div>
</body>
Add the CSS:
div{
width: 50%;
margin-left: auto; /* Pulled to right */
padding: 20px;
background-color: springgreen;
}
Output:
In the above example, we have set the element’s width to 50% and the 50% space is remaining.
As we have set the margin-left to auto, therefore, the browser gives all the 50% available space to the margin-left and which causes it to be aligned to the right side of its container.
Left Align with margin-right: auto;
In the above example, we saw that when we set the margin-left to auto, the browser gives all the available space to the left margin of the element which causes the element to be pulled to the right side of its container.
In a similar fashion, if you set the margin-right to auto, the browser first gives the specified width to the element and then it checks if there is any space remaining.
If there is some space available, it assigns all the available space to the margin-right, therefore, the element is pulled to the left side of its containing element.
<body>
<div>Left Aligned</div>
</body>
Add the CSS:
div{
width: 50%;
margin-right: auto; /* Pulled to left */
padding: 20px;
background-color: springgreen;
}
Output:
What Happens to Vertical Margins – margin: auto; vs margin: 0 auto;
Whenever you set the margin property to auto, only the left and right margins of the elements are set to auto. The top and bottom margins of the element are automatically computed to 0(or 0px) as they do not support the value auto.
So when you use margin: 0 auto; instead of margin: auto;, you explicitly tell the browser to set only the left and right margins to auto and use the value 0 for the top and bottom margins.
This means whether you use the margin: auto; or margin: 0 auto;, you will always get the same result. In both cases, the element will be pulled into the center of its containing element.
<body>
<div class="one">With margin: auto;</div>
<br>
<div class="two">With margin: 0 auto;</div>
</body>
Add the CSS:
.one{
width: 50%;
margin: auto;
padding: 20px;
background-color: springgreen;
}
.two{
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: springgreen;
}
Output:
As you can see from the above output, the divs are pulled into the center of their container(<body>) with margin: auto; as well as with margin: 0 auto;. You can use both interchangeably.
Why Margin Auto doesn’t Work with Inline Elements?
In all the examples that we have discussed so far, we took a <div> element to understand the margin: auto;. But did you think why is it so?
The reason is simple, the margin: auto; only works with block elements.
In HTML, a block element always starts on a new line and by default takes up the full width of its parent element for eg. divs, paragraphs, lists, etc. are all block elements.
But if you try to center align inline elements with margin: auto;, that will not work.
This is because an inline element doesn’t start on a new line and only takes up as much width as necessary to fit its content. For eg. spans, inputs, buttons, and links are all inline elements.
Because of their inline nature, the width and height properties also don’t affect such elements.
<body>
<span>I will not be centered.</span>
</body>
Add the CSS:
span{
margin: auto; /* It will not work */
width: 50%; /* This will also not work */
padding: 20px;
background: springgreen;
}
Output:
As you can see from the above output, the <span> isn’t pulled to the center of its containing element after applying the margin: auto;.
Let’s next see how can we fix it.
Centering Inline Elements with margin: auto;
As we saw in the above example, by default the margin: auto; doesn’t work with inline elements.
But if you anyhow want to center align such elements, you have to explicitly make them block-level by setting their display property to block and then applying margin: auto;
<body>
<span>I will be center aligned.</span>
</body>
Add the CSS:
span{
display: block; /* Make block-level */
margin: auto;
width: 50%;
padding: 20px;
background: springgreen;
}
Output:
Conclusion
In this article, we learned what is margin: auto; and how it actually works.
In summary, the margin: auto; or margin: 0 auto; is a very popular technique that is used to center align block-level elements in CSS.
When you set the margin of an element to auto, the browser itself calculates how much margin it has to give to the element.
If there is any space available after placing the element on the layout and you set the element’s margin to auto, the browser splits all the available space between the left and right margins which causes the element to be pulled to the center of its containing element.
However, when we set the margin to auto, only the left and right margins use the value auto. The top and bottom margins are automatically set to 0.
Thanks for reading.
