CSS margin: auto to Horizontally Center Element

The margin: auto is used to distribute the space automatically with equal spaces on both the left and the right sides of the elements, and it centers the text horizontally. It works well for block-level elements such as <div>, <p>, <section>, and other elements with a defined width.

This method makes the code look simple and clean because it doesn’t need positioning elements like Flexbox and the grid. Since the elements are centered horizontally, it gets adjusted to the different screen sizes for all the devices.

What is margin: auto in CSS?

The CSS margin: auto property automatically centers the element horizontally inside the container. This property works when the element has a fixed height and the right and left margins are set to auto. The browser will calculate the space evenly for centering the element.

How Does margin: auto Horizontally Center an Element?

The margin: auto property can be used for horizontally centering an element. It can be done by having an element with a fixed width and applying the margin: auto property to it. This makes the left and right margins get automatically adjusted equally for centering the elements.

Example 1: Centering the Div Using margin: auto

Create the div element to center it horizontally. Using margin: auto, you can place the div inside the parent container. And so, the inner div is horizontally centered within the outer div.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of Margin Auto</title>
    <style>
        .box{
            width: 100%; 
            Background-color: pink;
            height: 100vh; 
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .center {
            width: 55%;
            margin: auto; 
            background-color: orange;
            padding: 25px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center">
            Element Centered Using margin: auto.
        </div>
    </div>
</body>
</html>

Output:

UsinCentering the Div Using margin: auto

Explanation: The code centers the div horizontally. The .box is used to center the div, and the .center class styles the content and has margin: auto for centering the element inside the parent element.

Beginner-Friendly Courses to Learn Web Development

Online Web Development Courses That Get You Job-Ready

Explore Program

Example 2: Centering the Paragraph Text Using margin: auto

You can center the paragraph element horizontally. The margin: auto is used for centering, and display: flex is used for alignment.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center Paragraph with Margin Auto</title>
    <style>
        .container {
            width: 100%;
            height: 100vh;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .centered-text {
            width: 50%;
            margin: auto; 
            background-color: white;
            padding: 25px;
            text-align: center;
            font-size: 16px;
            border: 1px solid whitesmoke;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="centered-text">This is a paragraph that is horizontally centered using margin: auto. It is wrapped in a container and styled with padding, background color, and a border.</p>
    </div>
</body>
</html>

Output:

Centering the Paragraph Text Using margin: auto

Explanation: The paragraph is set to 60%, and the margin: auto property is used for centering the element. For centering the text, you can use text-align: center.

Example 3: Centering the Header Using margin: auto

The header is centered using the margin: auto and followed by adding some CSS properties for styling it.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center Header with Margin Auto</title>
    <style>
        .container {
            width: 100%;
            height: 100vh;
            background-color: black;
            display: block; 
        }

        header {
            width: 55%;
            margin: auto;
            background-color: white;
            padding: 15px;
            text-align: center;
            font-size: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>This is a header that is horizontally centered using margin: auto.</header>
    </div>
</body>
</html>

Output:

Explanation: The equal space on both sides can be provided by the margin: auto.

Get 100% Hike!

Master Most in Demand Skills Now!

Conclusion

Block-level elements like <div>, <p>, and <section> are used in this method for centering the elements. You can also find that these codes look simple since they don’t have any other positioning elements. You can use the above code for centering the div and paragraph horizontally so that you can get a well-structured webpage.