Center Align a Div in HTML

To center a div using CSS, is one of the most important aspects of front-end development which can be achieved using various CSS properties.

In this article we have used 5 approaches to center a div using CSS. We are having parent div elements and some child p elements, our task is to center the div element using CSS.

Approaches to Center a div Using CSS

Here is a list of approaches to Center a div Using CSS which we will be discussing in this article with step-wise explaination and complete example codes.

Center div Using margin Property

In this approach, we have used margin property to Center div Using CSS. CSS margin property creates space around outer part of element. This approach centers the div horizontally.

  • We have used "margin-left: auto;" and "margin-right: auto;" property which sets the left and right margin to auto centering the div.
  • We have used "margin-inline: auto;" property which is an alternate of margin-left and margin-right property.

Example

Here is a complete example code implementing above mentioned steps to center a div using CSS using margin property.

<html>
<head>
    <title>
        Center a div using margin Properties
    </title>
    <style>
        div {
            border: 2px solid green;
            padding: 10px;
        }
        .ele {
            width: 100px;
            height: 100px;
            background-color: rgb(109, 224, 244);
        }
        .ele1 {
            margin-left: auto;
            margin-right: auto;
        }
        .ele2 {
            margin-inline: auto;
        }
    </style>
</head>
<body>
    <h3>
        Center a div using margin properties.
    </h3>
    <h4>Using margin-left and margin-right Property</h4>
    <div class="ele ele1">
    </div>
    <br>
    <h4>Using margin-inline Property</h4>
    <div class="ele ele2">
    </div>
</body>
</html>

Center div Using flex Property

In this approach w have used CSS flex properties to center div. We will be centering a single flex item in example 1 and center multiple flex items in example 2.

  • We have used "display: flex;" to make flexible container.
  • We have used "justify-content: center;" to center the div horizontally.
  • We have used CSS height property to set the height of div and used "align-items: center;" to center the div vertically.
  • For aligning multiple items, we have used "flex-direction: column;" property which display the flex items vertically.

Example 1

In this example, we have centered a single div using justify-content and align-items property.

<html>
    <head>
        <title>
            Center a div using flex property
        </title>
        <style>
            .container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }
            .item {
            border: 2px solid green;
            width: 100px;
            height: 100px;
            background-color: rgb(109, 224, 244);
            }
        </style>
    </head>
    <body>
        <h3>
            Center single div item using 
            flex properties.
        </h3>
        <p>
            We have used justify-content to center the 
            item horizontally and align-items to center the 
            item vertically.
        </p>
        <div class="container">
            <p class="item"></p>
        </div>
    </body>
</html>

Example 2

In this example we have centered multiple flex items and used flex-direction:column to display it vertically. More property value of flex-direction can be used like row, row-reverse and column-reverse.

<html>
<head>
    <title>
        Center a div using CSS properties
    </title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .item {
            padding:10px;
            background-color: #04af2f;
            color: white;
            margin: 2px;
            text-align: center;
            letter-spacing: 1px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h3>
        Center Multiple Items Using flex Property.
    </h3>
    <p>
        We have used flex-direction property to 
        display items vertically.
    </p>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

Center div Using grid Property

In this approach, We have used three different CSS grid layout to center div element which are mentioned below. CSS grid layout is ideal for creating overall layout of a webpage.

Using place-items Property

We have used "place-items: center;" which centers the div. It can be considered as a shorthand property for align-items and justify-content property.

Example

Here is a complete example code implementing above mentioned steps to center a div using CSS place-items property.

<html>
<head>
    <title>
        Center a div using CSS properties
    </title>
    <style>
        .container {                      
            display: grid;
            place-items: center;
            height: 100vh;
        }
        .item {
            border: 2px solid green;
            padding: 10px;width: 100px;
            height: 100px;
            background-color: rgb(109, 224, 244);
        }
    </style>
</head>
<body>
    <h3>
        Center item using grid properties.
    </h3>
    <p>
        We have used CSS <strong>place-items
        </strong> property to center the div.
    </p>
    <div class="container">
        <p class="item"></p>
    </div>
</body>
</html>

Using grid-row and grid-column Property

We have Used grid-row and grid-column property which centers the div. We have used following steps to center a div:

  • We have used "grid-template-rows" and "grid-template-columns" which defines three rows and three columns where first and third rows and columns take a fraction of available space and second row and column is set to auto.
  • We have used "grid-row: 2;" which places the div in the second row of the grid.
  • We have used "grid-column: 2;" which places the div in the second column of the grid.

Example

Here is a complete example code implementing above mentioned steps to center a div using CSS grid-row and grid-column property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Center Div with CSS Grid</title>
    <style>
        .container {
            display: grid;
            grid-template-rows: 1fr auto 1fr;
            grid-template-columns: 1fr auto 1fr;
            height: 100vh;
        }
        .item {
            grid-row: 2;
            grid-column: 2;
            width: 100px;
            height: 100px;
            background-color: rgb(109, 224, 244);
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <h3>
        Center Item Using grid Property.
    </h3>
    <p>
        We have used CSS <strong> grid-row
        </strong> and <strong>grid-column
        </strong> property to center the div.
    </p>
    <div class="container">
        <p class="item"></p>
    </div>
</body>
</html>

Using place-self Property

We have used place-self property which centers the div both horizontally and vertically. It can be used as shorthand property for align-self and justify-self properties.

Example

Here is a complete example code implementing above mentioned steps to center a div using CSS place-self property.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Center div using place-self
    </title>
    <style>
        .container {
            display: grid;
            height: 100vh;
        }
        .item {
            place-self: center;
            width: 100px;
            height: 100px;
            background-color: rgb(109, 224, 244);
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <h3>
        Center Item Using grid Property.
    </h3>
    <p>
        We have used CSS <strong>place-self
        </strong> property to center the div.
    </p>
    <div class="container">
        <div class="item"></div>
    </div>
</body>
</html>

Center div inside Viewport

In this approach we have centered a div element which is not inside a div container.

  • We have used "position:fixed" property to fix the div in viewport.
  • After that, we have used "inset: 0px;" property which is a shorthand property to set CSS top, left, right and bottom properties.
  • Finally, we have used "margin: auto;" property which along with above two property centers the div element.

Example

Here is a complete example code implementing above mentioned steps to center a div within viewport.

<html>
<head>
    <title>
        Center a div using CSS properties
    </title>
    <style>
        .container {
            position: fixed;
            width: 10rem;
            height: 5rem;
            background-color: rgb(109, 224, 244);
            border: 2px solid green;
            inset: 0px;
            margin: auto;
            padding:5px;
        }
    </style>
</head>
<body>
    <h3>
        Centering item inside viewport.
    </h3>
    <div class="container">
    </div>
</body>
</html>

Center text Using CSS Property

In this approach, we have used above approach to center the flex item and text-align property to place the text content at the center.

  • We have use "text-align: center;" to center the text inside div and above approach to center the div using flex property.

Example

Here is a complete example code implementing above mentioned steps to center the text using CSS text-align property.

<html>
    <head>
        <title>
            Centering text
        </title>
        <style>
            .container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                text-align: center;
            }
            p {
            border: 2px solid green;
            padding: 10px;
            width: 150px;
            }
        </style>
    </head>
    <body>
        <h3>
            Center Text with flex box
            Using text-align Property.
        </h3>
        <div class="container">
            <p>
                In this example, we have placed  
                text at the center along with the div.
            </p>
        </div>
    </body>
</html>

Conclusion

To center a div using CSS is an important task and very simple process which can be imlemented using various CSS properties. In this article we have used five approaches which are by using margin property, using flex property, using grid layout, centering inside viewport and at the end centering text using text-align property. Any of the approaches can be usd depending on the user's need.

Updated on: 2024-08-08T17:14:41+05:30

12K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements