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.