Home/ Questions/Q 919663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T18:35:00+00:00

What does auto do in margin: 0 auto; ? I can’t seem to understand

  • 0

What does auto do in margin: 0 auto;?

I can’t seem to understand what auto does. I know it sometimes has the effect of centring objects.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within its parent container.

    Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

    margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

    Therefore, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there’s 50px of free space to share between margin-left and margin-right:

    var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

    Which would give:

    margin-left: 25;
margin-right: 25;

    Have a look at this jsFiddle. You do not have to specify the parent width, only the width of the child object.

    • 0