Skip to content
Related Articles
Open in App
Not now

Related Articles

How does auto property work in margin:0 auto in CSS ?

Improve Article
Save Article
  • Last Updated : 17 Mar, 2021
Improve Article
Save Article

In this article, we will learn how auto property works in margin:0 auto in CSS. The margin property is used to set the margins for an element. The margin property has four values margin-top, margin-right, margin-bottom, and margin-left.


margin: top_margin right_margin bottom_margin left_margin;

/* We can also use the shortened syntax 
   of margin that takes only two parameters */

margin: top_and_bottom_margin left_and_right_margin;

So in margin: 0 auto, the top/bottom margin is 0, and the left/right margin is auto, Where auto means that the left and right margin are automatically set by the browser based on the container, to make element centered. The margin: 0 auto equivalent to:




<!DOCTYPE html>
<html lang="en">
      background-color: yellow;
      /* It set top and bottom margin to 5% and, the left and right
      are automatically set by browser */
      margin: 5% auto;
      color: rgb(5, 138, 5);
      font-size: 50px;
  <div class="parent">
    <h1 class="h1">GeeksforGeeks</h1


  • Before set margin:

  • After set margin:

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!