How to Vertically Center Text with CSS ?
To vertically center text with CSS, combine specific properties to ensure perfect alignment within its container. This helps to maintain visual balance and readability across diverse screen sizes and resolutions.
Below are the approaches to Vertically Center Text with CSS:
Table of Content
- Using display: table-cell
- Using line-height and vertical-align
- Using Flexbox Method
Using display: table-cell
To vertical centering of text using display: table-cell; vertical-align: middle; on the container element, ensuring precise alignment regardless of content size or screen dimensions. The container spans the full viewport height (100vh) and width (100vw), with a dashed border and beige background.
Example: The example below shows Vertically Center Text with CSS using display: table-cell.
<!DOCTYPE html>
<html>
<head>
<title>Horizontal and Vertical alignment</title>
<style>
.container {
height: 100vh;
width: 100vw;
display: table-cell;
vertical-align: middle;
border: 2px dashed #4b2869;
background-color: beige;
}
</style>
</head>
<body>
<div class="container">
Vertically Center Text with
display: table-cell Property
</div>
</body>
</html>
Output:
Output
Using line-height and vertical-align
To vertically centerthe text within a div element using line-height: 200px; to match its height, while vertical-align: middle; on a nested span ensures precise alignment regardless of font size. The text-align: center; property horizontally centers the text, and a dashed border provides visual distinction. Example: The example shows Vertically Center Text with CSS using line-height and vertical-align.
<!DOCTYPE html>
<html>
<head>
<title> Horizontal and Vertical alignment </title>
<style>
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
</style>
</head>
<body>
<div>
<span>w3wiki</span>
</div>
</body>
</html>
Output:
Using Flexbox Method
To vertically align a text using the Flexbox Method by setting display: flex; align-items: center; on the body element, ensuring perfect centering regardless of screen size. The text is styled with font-size: of 20px; font-weight: bold; for readability.
Example: The example below shows Vertically Center Text with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Vertical Center Text - Flexbox Method</title>
<style>
body {
display: flex;
align-items: center;
height: 100vh;
margin: 0;
background-color: rgb(181, 226, 211);
}
.text {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="text">
Vertical alignment of the text
using Flexbox Method
</div>
</body>
</html>
Output:
Output