Example of a horizontally centered div with the CSS display property:

Source Code: (back to article)

<!DOCTYPE html>

<html>

<head>

<style>

#main-container {

display: flex;

width: 100%;

justify-content: center;

background-color: #0666a3;

}

#main-container div {

background-color: #8ebf42;

padding: 10px;

}

</style>

</head>

<body>

<div> I am a horizontally centered div with the CSS display property.</div>

</div>

</body>

</html>