Answer: You can vertically center text by using the Flexbox layout.
HTML(Hypertext Markup Language) is used to create the structure of a webpage. Vertically centering a text on the web page is important for visual balance, focus attention, and improving the readability of content. There are a few more properties available to vertically center a text such as absolute position, display, and line-height. We will discuss these methods in this blog in detail.
Table of Contents:
Methods to Vertically Center the Text with CSS
There are many CSS properties to center the text vertically. Here are some of the best methods that you can use to vertically center the text.
Method 1: Using CSS Flexbox to Vertically Center the Text with CSS
You can use CSS flexbox to align the text vertically. This layout divides the space between the items in the container.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Centering Example</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 30%;
border: 1px solid #000;
}
.text {
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertically Centered Text</div>
</div>
</body>
</html>
Output:
Explanation: The div is created using Flex-box, which centers the text vertically and provides equal space among items.
Method 2: Using the Display Property to Vertically Center the Text with CSS
You can create a container div with display: table and a text div inside it with display: table-cell. This will make the text center vertically.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Property Centering</title>
<style>
.container {
display: table;
width: 30%;
height: 100px;
border: 1px solid #000;
}
.text {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertically Centered Text</div>
</div>
</body>
</html>
Output:
Explanation: The HTML code creates the container using a display: table. The text-align: center in the code, makes the text get centered.
Method 3: Using CSS Grid Layout to Vertically Center the Text with CSS
You can use a CSS grid layout to center the text vertically. This layout provides a two-dimensional grid.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Centering</title>
<style>
.container {
display: grid;
place-items: center; /* Center items horizontally and vertically */
width: 30%;
height: 100px; /* Reduced height */
border: 1px solid #000;
}
.text {
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertically Centered Text</div>
</div>
</body>
</html>
Output:
Explanation: You use CSS Grid to create the div and center the text vertically.
Method 4: Using line-height Property to Vertically Center the Text with CSS
You can use the line-height property to center text vertically, especially for single-line text. This method also helps control the spacing between lines of text.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Height Example</title>
<style>
.container {
height: 100px;
Width: 30%;
border: 1px solid #000;
text-align: center;
line-height: 100px;
}
.text {
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<span class="text">Vertically Centered Text</span>
</div>
</body>
</html>
Output:
Explanation: You set the div’s height and use the line-height property to center the text.
Method 5: Equal Top and Bottom Padding to Vertically Center the Text with CSS
You can use equal padding on the top and bottom of the container to center the text vertically. This method works well for fixed-height containers.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padding Centering Example</title>
<style>
.container {
height: 50px;
width: 30%;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
padding: 50px 0;
}
.text {
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<span class="text">Vertically Centered Text</span>
</div>
</body>
</html>
Output:
Explanation: This code creates a div and sets the container’s height and width. You use padding to center the text.
Method 6: Using Absolute Positioning and Negative Margin to Vertically Center the Text with CSS
You can vertically center the text by position: absolute with top, left, right, and bottom values and a negative margin is also used.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Positioning</title>
<style>
.container {
position: relative;
height: 100px;
Width: 30%;
border: 1px solid #000;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertically Centered Text</div>
</div>
</body>
</html>
Output:
Explanation: The container is created with relative positioning with the vertically centered text.
Method 7: Using Table Layout with Padding to Vertically Center the Text with CSS
In this method, you can use the display: table property along with padding to center the text. This approach also works for multi-line text.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering with Table Layout and Padding</title>
<style>
.container {
display: table;
width: 30%;
height: 100px;
padding: 0 10px;
border: 1px solid #000;
}
.text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertically Centered Text</div>
</div>
</body>
</html>
Output:
Explanation: The div has been created with a table layout and padding. The table-cell and text-align: center is used to center the text vertically.
Method 8: Using Absolute position with position: sticky to Vertically Center the Text with CSS
You can vertically center the text using position: absolute with transform: translate(-50%, -50%) and position: sticky is used to pin an element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering with Absolute Positioning</title>
<style>
.container {
position: sticky;
height: 100px;
width: 30%;
border: 1px solid #000;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertically Centered Text</div>
</div>
</body>
</html>
Output:
Explanation: The transform property centers the text vertically in this code.
Conclusion
You can use the CSS properties to vertically center text. The Flex-box and Grid layout align the text and distribute the space between them equally. The above-discussed methods are the most efficient way to vertically center the text.
FAQs
1. What is the simplest method to vertically center text in CSS?
The simplest method is using Flexbox with align-items: center and justify-content: center.
2. Can I vertically center text inside a div without specifying a height?
Yes, using Flexbox or Grid, you don’t need to specify a height. These methods will center the text within the available space.
3. What if I need to vertically center the text in a multi-line paragraph?
Using Flexbox or Grid will handle multi-line text effectively. If using other methods, ensure the container can adapt to the height of the multi-line text.
4. Is it possible to vertically center text within a responsive design?
Yes, using methods like Flexbox and Grid, which are naturally responsive, is highly recommended for modern, responsive designs.
5. Can I vertically center text inside an inline element like a span?
Yes, you can wrap the span in a parent element like a div, and then use one of the methods mentioned earlier to center it.