CSS text vertical centering
Vertical Centering Text with CSS
Vertical centering of text is a common requirement in web design. Whether in navigation bars, buttons, titles, or paragraphs, we often want text to be vertically centered to maintain the page’s aesthetics and consistency. This article will introduce several methods for achieving vertical centering of text and provide corresponding sample code.
1. Line-height Method
Using the line-height property is one of the simplest ways to vertically center text. By setting the line-height equal to the height of the box, the text is vertically centered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - Line Height</title>
<style>
.container {
width: 200px;
height: 100px;
background-color: #f0f0f0;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">Vertical Centering with Line Height</div>
</body>
</html>
Output:
In the example above, we create a container div with a width of 200px, a height of 100px, and a gray background color. By setting the line-height property to 100px, the text is vertically centered.
2. Flex Layout Methods
Flex layout is a powerful layout method that makes it easy to horizontally and vertically center elements. By setting the container’s display property to flex and using the align-items and justify-content properties, you can vertically center the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - Flexbox</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">Vertical Centering with Flexbox</div>
</body>
</html>
Output:
In the example above, we create a container div and set the display property to flex, the align-items property to center, and the justify-content property to center. This allows the text to be vertically centered.
3. Absolute Positioning Method
Using absolute positioning is also a way to achieve vertical centering of text. By setting the parent element’s position attribute to relative, the child element’s position attribute to absolute, and using the top and transform attributes, you can achieve vertical centering of text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - Absolute Positioning</title>
<style>
.container {
position: relative;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
.text {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertical Centering with Absolute Positioning</div>
</div>
</body>
</html>
Output:
In the example above, we create a parent container div and set its position to relative, its width to 200px, its height to 100px, and its background color to gray. Then, in the child element, we set its position to absolute, its top to 50%, and its transform to translateY(-50%) to vertically center the text.
4. Table Method
Using a table is another way to vertically center text. Create a table, set its display property to table, set the cell’s display property to table-cell, and use the vertical-align property to vertically center text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - Table</title>
<style>
.container {
display: table;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
.text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertical Centering with Table</div>
</div>
</body>
</html>
Output:
In the above example, we create a container div and set its display property to table, with a width of 200px, a height of 100px, and a gray background color. Then, in the child element, we set the display property to table-cell and the vertical-align property to middle to vertically center the text.
5. Grid Layout Method
Using Grid layout is another way to achieve vertical text centering. By setting the container’s display property to grid and using the align-items and justify-content properties, you can achieve vertical centering of the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - Grid</title>
<style>
.container {
display: grid;
place-items: center;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">Vertical Centering with Grid</div>
</body>
</html>
Output:
In the example above, we create a container div and set its display property to grid, its place-items property to center, a width of 200px, a height of 100px, and a gray background color. This will vertically center the text.
6. Combining Flexbox and Grid
Flexbox and Grid layouts can be used together to achieve more complex layout requirements. By setting the container’s display property to flex and grid, and using the align-items, justify-content, and place-items properties, you can achieve vertical centering of the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - Flexbox and Grid</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
.text {
display: grid;
place-items: center;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertical Centering with Flexbox and Grid</div>
</div>
</body>
</html>
Output:
In the example above, we create a container div and set its display property to flex, align-items to center, justify-content to center, with a width of 200px, a height of 100px, and a gray background. Then, in the child element, we set its display property to grid and its place-items property to center, so that the text is vertically centered.
7. Using the transform method
Using the transform property is another way to vertically center text. By setting the child element’s position property to absolute, the top and left properties to 50%, and the transform property to translate(-50%, -50%), you can achieve vertical centering of the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - Transform</title>
<style>
.container {
position: relative;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertical Centering with Transform</div>
</div>
</body>
</html>
Output:
In the example above, we create a parent container div and set its position to relative, width to 200px, height to 100px, and background color to gray. Then, in the child element, we set its position to absolute, its top and left to 50%, and its transform to translate(-50%, -50%) to vertically center the text.
8. Using Pseudo-Elements
Using pseudo-elements is another way to vertically center text. By creating a pseudo-element and setting its display property to inline-block and its vertical-align property to middle, you can vertically center the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - Pseudo Element</title>
<style>
.container {
position: relative;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
.container::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.text {
display: inline-block;
vertical-align: middle; text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertical Centering with Pseudo Element</div>
</div>
</body>
</html>
Output:
In the example above, we create a parent container div and set its position property to relative, width to 200px, height to 100px, and background color to gray. Then, use the ::before pseudo-element to create an empty inline-block element, set its height to 100%, and set its vertical-align property to middle. This will vertically center the text.
9. Using Table Layout
Using a table layout is another way to vertically center text. Create a table, set its display property to table, its cell display property to table-cell, and use the vertical-align property to vertically center the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - Table Layout</title>
<style>
.container {
display: table;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
.text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertical Centering with Table </div>
</div>
</body>
</html>
Output:
In the example above, we create a container div and set its display property to table, with a width of 200px, a height of 100px, and a gray background. Then, in the child element, we set its display property to table-cell and its vertical-align property to middle to vertically center the text.
10. Combining CSS Grid and Flexbox
Finally, we can combine CSS Grid and Flexbox layout to achieve more flexible vertical text centering. By setting the container’s display properties to grid and flex, and using the align-items, justify-content, and place-items properties, we can achieve vertical text centering.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Centering - CSS Grid and Flexbox</title>
<style>
.container {
display: grid;
place-items: center;
width: 200px;
height: 100px;
background-color: #f0f0f0;
}
.text {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Vertical Centering with CSS Grid and Flexbox</div>
</div>
</body>
</html>
Output:
