How to vertically center text in a div

This is a neat way of centering text in a div. Live demo here.

 

<html>
<head>
 <title>Vertical text center demo</title>
</head>
<body>
<style>
.textbox {
 height: 200px;
 width: 300px;
 text-align: center;
 font-size: 14px;
 font-weight: bold;
 background-color: blue;
}
.textbox p {
 height: 100%;
 display: flex; /* vertically center text */
 justify-content: center;
 align-content: center;
 flex-direction: column;
 margin: 0 50px;
 color: white;
}
</style>
<h1>Vertical text center demo</h1>
<div class="textbox">
 <p>This text is vertically centered in the box</p>
</div>
</body>
</html>
Exit mobile version