How to center text (horizontally and vertically) inside a div block in CSS ?
Last Updated :
25 Jan, 2024
Centering text both horizontally and vertically inside a div block is an important aspect of web design as it helps to create visually appealing and structured layouts. There are several methods for centering text both horizontally and vertically within a div block, each with its advantages and disadvantages. In this article, we will explore the most common approaches for centering text within a div block.
Uses of Centering Text inside a Div Block:
- Creating header and footer sections: By centering text within a div block, designers and developers can create clean and professional-looking header and footer sections for websites and web applications.
- Displaying important information: Centering text within a div block can be used to display important information in a prominent position, making it easier for users to find and understand.
- Highlighting specific content: Centering text within a div block can be used to highlight specific content within a page, drawing attention to important messages and calls to action.
- Creating modal dialogs and forms: Centering text within a div block can be used to create modal dialogs, forms, and other interactive elements, improving the overall user experience.
- Improving readability: By centering text within a div block, designers and developers can improve the readability and overall appearance of websites and web applications.
- Achieving a professional look: Centering text within a div block can help create a polished and professional look for websites and web applications, giving them a clean and cohesive appearance.
Using Flexbox:
- Set the parent container to display: flex; This enables the use of a flexbox and turns the parent container into a flex container.
- Use justify-content: center to center the child element horizontally within the parent container.
- Use align-items: center to center the child element vertically within the parent container.
Example: This example shows how to center text inside a div using the flexbox property of CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Center text horizontally and
vertically inside a div block
</title>
<style>
body {
text-align: center;
}
.container {
height: 300px;
width: 645px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeekforGeeks</h1>
</div>
</body>
</html>
|
Output:
Using Grid
- CSS grid is another popular layout tool that enables you to create complex and flexible grid-based layouts.
- Set the parent container to display: grid. This enables the use of a CSS grid and turns the parent container into a grid container.
- Use the place-items: center property to center the child element both horizontally and vertically within the grid cell. This property is a shorthand for both justify-items and align-items.
Example: This example shows how to center text inside a div using the grid property of CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Center text horizontally and
vertically inside a div block
</title>
<style>
.container {
height: 300px;
width: 645px;
display: grid;
place-items: center;
border: 2px solid black;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeekforGeeks</h1>
</div>
</body>
</html>
|
Output:
Using Text Align:
- The text-align property is a simple and straightforward way to center text horizontally within a div block.Â
- Set the parent container to text-align: center. This centers the child element horizontally within the parent container.
- Use line-height: <height> to center the child element vertically within the parent container. The value of <height> should be equal to the height of the parent container.
Example: This example shows how to center text inside a div using the text align of CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Center text horizontally and
vertically inside a div block
</title>
<style>
.container {
height: 300px;
width: 645px;
text-align: center;
line-height: 400px;
border: 2px solid black;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeekforGeeks</h1>
</div>
</body>
</html>
|
Output:
Using Table Cell
- Set the parent container to display: table. This emulates the behavior of a table.
- Set the child element to display: table-cell. This emulates the behavior of a table cell.
- Use vertical-align: middle to center the child element vertically within the parent container.
- Use text-align: center to center the child element horizontally within the parent container.
Example: This example shows how to center text inside a div using the text table cell of CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Center text horizontally and
vertically inside a div block
</title>
<style>
.container {
height: 300px;
width: 645px;
display: table-cell;
text-align: center;
vertical-align: middle;
border: 2px solid black;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeekforGeeks</h1>
</div>
</body>
</html>
|
Output:
- Set the parent container to position: relative. This enables the use of absolute positioning for the child element.
- Set the child element to position: absolute. This enables the use of absolute positioning for the child element.
- Set the child element’s top and left properties to 50%. This positions the child element at the center of the parent container.
- Use transform: translate(-50%, -50%) to center the child element both horizontally and vertically.
Example: This example shows how to center text inside a div using the transform property of CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Center text horizontally and
vertically inside a div block
</title>
<style>
.container {
height: 300px;
width: 645px;
position: relative;
border: 2px solid black;
}
h1 {
position: absolute;
top: 50%;
color: green;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<h1>GeekforGeeks</h1>
</div>
</body>
</html>
|
Output:
In summary, the chosen approach will depend on the specific use case, the compatibility with other elements, and the desired design aesthetic. With these methods, it is possible to achieve a centered text block in a variety of layouts and designs.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...