How to Center Text Vertically in DIV with CSS

December 29, 2020 admin

In this tutorial, we are going to see how to center text vertically in <div> with CSS. If you try to align the text in a div using vertical-align: middle; CSS rule, it does not work. Suppose you have a div element with a height of 30px and you have placed some text in the div that you want to center vertically. The easiest way to do this is to simply apply the line-height property with a value equal to the height of div which is 30px.

Source Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How to Vertically Center a DIV with CSS</title>
		<style type="text/css">
			.box{
				height: 30px;
				line-height: 30px;
				padding: 15px;        
				border: 2px solid #000;
			}
		</style>
	</head>
	<body>
		<div class="box">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</div>
	</body>
</html>