Skip to content
Home » Posts » How to center a div using flexbox?

How to center a div using flexbox?

    Flexbox has given us a very nice way to center HTML elements without doing any kind of CSS or JS hack. Let’s have a look at how we can center a div using flexbox.

    Below is the complete HTML code for the above image.

    HTML
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Center div using flexbox</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <div class="parent flex-center">
            <div class="child flex-center">
                <span>I'm centered</span>
            </div>
        </div>
    </body>
    
    </html>

    CSS

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 24px;
    }
    
    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .parent {
        height: 100%;
        background-color: #066163;
    }
    
    .child {
        background-color: #CDBE78;
        width: 200px;
        height: 200px;
        border: solid 1px #CDBE78;
        border-radius: 4px;
        padding: 5px;
    }

    Here, we have created a class .flex-center which sets the CSS properties of the element whose child we want to be centered. Read more about flex here.

    Tags: