Example of centering the content of a <div> both horizontally and vertically:

Source Code: (back to article)

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

<style>

div {

border: 2px solid lightblue;

height: 100px;

text-align: center;

display: flex;

justify-content: center;

align-items: center;

}

</style>

</head>

<body>

<h1>Horizontally and vertically aligned element</h1>

<div>

Both horizontally and vertically aligned text with the CSS justify-content property.

</div>

</body>

</html>