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.

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


    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.