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>
Leave a Reply
Want to join the discussion?Feel free to contribute!