Role of Margin Property with Value Auto in CSS

The margin property with value auto is used to horizontally center the element within its container. You can try to run the following code to implement margin: auto;

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 200px;
            margin: auto;
            border: 2px dashed blue;
         }
      </style>
   </head>
   <body>
      <p>This is demo text</p>
      <div>
         This is horizontally centered because it has margin: auto;
      </div>
   </body>
</html>

Output

Updated on: 2020-06-22T05:31:06+05:30

184 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements