How to align block elements to center using CSS ?

Last Updated : 20 Jun, 2024

Block elements are known for taking up the full line space, forcing other elements to start on a new line. This means they have a width of 100% of the webpage or container holding the block. In this article, we will explore how block elements usually behave and how to center them using CSS.

Table of Content

Understanding Block Elements
How to Center Block Elements
Examples of aligning block elements to Center using CSS

Understanding Block Elements

Block elements take up the entire width of their container, even if the content inside them only occupies a small portion of that width. By default, elements like <div>, <h1>, and <p> are block elements. You can also make any element behave like a block by setting its display property to display: block.

How to Center Block Elements

To center block elements, we primarily rely on the margin property. Since block elements span the full width of their container, we adjust their margins to position them horizontally and vertically. It's important to note that the text-align: center property does not center block elements; it only affects inline or inline-block elements.

Examples of aligning block elements to Center using CSS

1. Center block elements using margin property:

We need to specify the margin from left and right such that it looks centered. We do not need to do this manually, we have one property value "auto" which will automatically set the margin such that our block element is placed in the center. Use the below CSS property to center your block element.

margin: auto

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
        h2,
        p {
            text-align: center;
        }
        
        .myblock {
            margin: auto;
            border: 2px solid red;
            width: fit-content;
            padding: 15px;
            text-align: center;
            background-color: lightyellow;
        }
        
        header {
            font-size: 40px;
            background-color: lightgreen;
            margin: auto;
            width: fit-content;
        }
        
        .myinline {
            padding: 10px;
            border: 2px solid blue;
        }
        
        .holder {
            text-align: center;
        }
    </style>
</head>

<body>
    <header>hello</header>

    <div class="myblock">
        div who has default display : block
    </div>

    <div class="holder">
        <div style="display: inline-block" class="myinline">
            inline block paragraph 1
        </div>

        <div style="display: inline-block" class="myinline">
            inline block paragraph 2
        </div>
    </div>
</body>

</html>

Output:

Center block elements using margin property

2. Centering Element Using display block Property:

We have one image that has some space around it, so by default the non-block element will come next to the img tag and not on the next line. After setting the "display: block" property, we can make our image to block element. It can be centered using "margin: auto" property.

Note: The body tag has been set to the "text-align: center" property. We know that it is not affecting the block elements.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        header {
            font-size: 20px;
            margin: auto;
            width: 30%;
            background-color: lightgreen;
            margin-bottom: 10px;
        }
        
        p {
            display: inline-block;
        }
        
        img {
            display: block;
            margin: auto;
        }
    </style>
</head>

<body>
    <header>
        centering image using display: block
    </header>

    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210810104012/geeksimage.png"
        alt="image here" width="500" height="400" />

    <p>
        paragraph came to the new line even 
        if it is inline, because the img is 
        set to block
    </p>
</body>

</html>

Output:

Centering Element Using display block Property

Centering block elements in CSS is a straightforward process once you understand how to use the margin property effectively. By setting margin: auto, you can easily center block elements horizontally. This technique is useful for various elements, including <div>, images, and more, enhancing the overall layout and aesthetics of your web pages.