Center a
Using the Flexbox Property of CSS

To center a div using flexbox property of CSS, we will be using CSS flexbox and it's properties. In this article, We will understand and perform following three things to center a <div> using the Flexbox property of CSS:

Center div Using flexbox on Horizontal Axis

To center div on Horizontal axis, we will be using CSS justify-content property which centers div horizontally.

Example

Here is an example to center div on horizontal axis.

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

Center div Using flexbox on Both Axes

To center div using flexbox on both axes we have used CSS justify-content and align-items property.

  • 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.

Example

<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 div Using flexbox on both Axes
        </h3>
        <p>
            We have used <strong>justify-content</strong> 
            to center the item horizontally and 
            <strong>align-items</strong> to center the 
            flex item vertically.
        </p>
        <div class="container">
            <p class="item"></p>
        </div>
    </body>
</html>

Center Multiple Items Using Flexbox

In this section, we will be centering multiple flex items using flexbox. For this we have used CSS flex-direction property which display flex items according to value specified.

  • For aligning multiple items, we have used "flex-direction: column;" property which display the flex items vertically.
  • 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.

Example

Here is an example to center multiple items using flexbox.

<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 <strong>flex-direction</strong> 
        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>

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 CSS flexbox to center a div. We have performed following three things: center div on horizontal axis using CSS justify-content property, center div on both axes using justify-content and align-items property and center multiple flex items using flexbox.

Updated on: 2024-08-09T14:00:47+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements