CSS margin: 0 auto to Horizontally Center Element

You can use margin: 0 auto for centering the element horizontally. The block-level elements such as <div>, <p>, <section>, <article>, <header>, etc., can be centered. The spaces are equally distributed between both sides of the elements. This property doesn’t work for inline elements like <span> or <a>, and it will work only when it is set to display: block.

What is margin: 0 auto in CSS?

The CSS property margin: 0 auto is used for centering the elements within its container. It sets the top and bottom margins to 0 while making the left and right margins automatically adjust to evenly distribute the remaining space.

How Do margin: 0 auto Horizontally Center an Element?

The margin: 0 auto property can be used for horizontally centering an element. The element should have a defined width. In the margin: 0 auto property, 0 means no extra margin is applied to the top and bottom of the elements, and auto means telling the browser to calculate the equal space on both the left and right sides for centering the elements.

Example 1: Centering Div Using margin: 0 auto

You can use margin: 0 auto to work with basic-level elements with the specified width, which sets equal right and left margins.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Using Margin Auto</title>
  <style>
    .container {
      width: 90%;
      background-color: white;
      padding: 20px;
    }
    .centered {
      width: 300px; /* Width is needed */
      margin: 0 auto;
      background-color: lightblue;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="centered">
      This div is horizontally centered using margin: 0 auto.
    </div>
  </div>
</body>
</html>

Output:

Explanation: You can use the margin: 0 auto property to center the div element. The .container class is used to style the container using CSS properties like width: 90% and padding: 20px, and the .centered class styles the container inside.

Learn Web Development and Launch Your Tech Career

Professional Web Development Courses

Explore Program

Example 2: Centering Image Using margin: 0 auto

The image is centered using display: block and setting the left and right margins to auto.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Image Using Margin Auto</title>
  <style>
    .container {
      width: 90%;
      background-color: white;
      padding: 20px;
      text-align: center;
    }
    .centered-image {
      width: 300px; 
      height: auto; 
      display: block; 
      margin: 0 auto;
      border: 3px solid #ccc;
      padding: 15px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsXYS2KxGomQ38tPnnTYeWEGEZI586ZztqeA&s" alt="Placeholder Image" class="centered-image">
  </div>
</body>
</html>

Output:

Explanation: You can use the margin: 0 auto property to center the image element. And use CSS properties such as width, background color, and padding for styling the container.

Example 3: Centering Button Using margin: 0 auto

You can horizontally center the button inside the viewport using margin: 0 auto along with Flexbox properties like justify-content: center and align-items: center.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Center Button Using Margin Auto</title>
  <style>
    .container {
      width: 100%;
      height: 100vh;
      display: flex; 
      justify-content: center;
      align-items: center;
      background-color: white;
    }
    .center-button {
      width: 150px;
      padding: 10px;
      font-size: 18px;
      background-color: purple;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      text-align: center;
    }
    .center-button:hover {
      background-color: violet;
    }
  </style>
</head>
<body>
  <div class="container">
    <button class="center-button">Click Me</button>
  </div>
</body>
</html>

Output:

Explanation: You can use margin: 0 auto to center the button horizontally. You can style the button using CSS properties like width, padding, background color, and rounded corners.

Get 100% Hike!

Master Most in Demand Skills Now!

Conclusion

You can use this method to center the elements horizontally. In the above-discussed example, the div, image, and button are centered horizontally using the margin: 0 auto property. The margin of both the left and right sides is set to auto so that it can equally distribute the space to the elements. Therefore, you can make your webpage look well-structured.