You can center the text horizontally and vertically inside a div block using Flexbox and Grid layout.
HTML(Hypertext Markup Language) is used to create the structure of a webpage. Vertically and horizontally centering a text on the web page is important for visual balance, focus attention, and improving the readability of content. A few more properties are available to center the text vertically and horizontally, such as vertical-align, display, and line-height. We will discuss these methods in this blog in detail.
Table of Contents:
Methods for Centering the Text Horizontally and Vertically
There are many CSS properties to center the text horizontally and vertically. Here are some of the best methods that you can use to center the text vertically and horizontally.
Method 1: Using Flexbox Layout
You can center the text using the Flexbox layout. When you use the justify-content: center, the text gets horizontally centered, and with the align-items: center the text gets vertically centered.
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</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<p>Centered Text</p>
</div>
</body>
</html>
Output:
Explanation: The container is created with the height and width of 100 and 400px, and the text is centered using justify-content: center.
Method 2: Using Grid Layout
You can use the Grid layout to center the text easily. You can use the display: grid and place-items: center to make the grid layout and center the items, horizontally and vertically.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Centering</title>
<style>
.container {
display: grid;
place-items: center;
height: 100px;
width: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<p>Centered Text</p>
</div>
</body>
</html>
Output:
Explanation: You can center the text using place-items: center in the container. The container is styled in such a way that it has a height and width of 100 and 400px, respectively.
Method 3: Using text-align Property
You can horizontally center the inline and inline-block elements using the text-align property. Vertically centering the text is a little hard, but it can be done by adding a fixed height.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Align Centering</title>
<style>
.container {
text-align: center;
height: 100px;
width: 400px;
line-height: 100px;
border: 1px solid #000;
}
.container p {
margin: 0;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<p>Centered Text</p>
</div>
</body>
</html>
Output:
Explanation: You can center the text horizontally and vertically in the container using text-align: center and line-height: 100px.
You can use the transform property with the translate, to center the text vertically and horizontally. You can use this method for centering any element, not only the text.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Centering</title>
<style>
.container {
position: relative;
height: 100px;
width: 400px;
border: 1px solid #000;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<p class="centered">Centered Text</p>
</div>
</body>
</html>
Output:
Explanation: You can use the transform: translate(-50%, -50%) property to center the text vertically and horizontally.
Method 5: Using line-height Property
You can use this method to center the single-line text vertically and horizontally. You can use the text-align: center property to center the 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 Centering</title>
<style>
.container {
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid #000;
}
.container p {
font-size: 40px;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<p>Centered Text</p>
</div>
</body>
</html>
Output:
Explanation: For centring the elements you can set the height to match the light-height and text-align: center is used to center the text horizontally.
Method 6: Using table and table-cell Method
You can use this method to center the text. This method uses the table layout for centering the text vertically and horizontally.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Centering</title>
<style>
.container {
display: table;
width: 50%;
height: 100px;
border: 1px solid #000;
}
.content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content p {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Centered Text</p>
</div>
</div>
</body>
</html>
Output:
Explanation: You can use the table display to center the text and properties like vertical-align: middle and text-align: center are used to center the text vertically and horizontally.
You can use absolute position to center the text both vertically and horizontally. You can use top: 50% and left: 50%, and then applythe transform: translate(-50%, -50%).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transform Centering</title>
<style>
.container {
position: relative;
height: 100px;
width: 400px;
border: 1px solid #000;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Centered Text</p>
</div>
</div>
</body>
</html>
Output:
Explanation: You create the container with a height and width of 100 and 400 px. The text inside the container is centered using the absolute positioning and transform: translate(-50%, -50%).
Conclusion
You can use the CSS properties to vertically and horizontally center text. The Grid and Flexbox 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. Can I combine these methods for better compatibility?
Yes, you can combine methods, but usually, one method is sufficient. Combining too many methods might lead to unexpected results.
2. Why is my text not centered even after using these methods?
Ensure there are no conflicting CSS properties and that the height and width of the container are properly set. Check for any default margins on the text elements that could cause misalignment.
3. How can I center text inside a div using table display?
Apply table and table-cell display properties to center text inside the div.