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.