How to Center Text in a Div Vertically and Horizontally
Centering text within a <div> block is essential for creating visually attractive layouts. Various methods, such as flexbox, grid, and CSS transforms, offer solutions with distinct benefits. In this article, we’ll explore various methods to center text both horizontally and vertically using CSS. From classic approaches to modern flexbox solutions,
Table of Content
- 1. Centering text using Flexbox
- 2. Centering text using Grid
- 3. Centering text using Text Align
- 4. Centering text using Table Cell
- 5. Centering text using Transform Property
1. Centering text using Flexbox
Flexbox provides a powerful and flexible way to center elements/text. It’s widely supported by modern browsers.
- 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.
<!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>GeekforBeginner</h1>
</div>
</body>
</html>
Output:
2. Centering text 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.
<!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>GeekforBeginner</h1>
</div>
</body>
</html>
Output:
3. Centering text using Text Align
The text-align property is a simple and straightforward way to center text horizontally within a div block. For single-line text or images, you can use the following CSS properties:
- 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.
<!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>GeekforBeginner</h1>
</div>
</body>
</html>
Output:
4. Centering text 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.
<!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>GeekforBeginner</h1>
</div>
</body>
</html>
Output:
5. Centering text using Transform Property
- 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.
<!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>GeekforBeginner</h1>
</div>
</body>
</html>
Output:
Choosing the Right Method
The best method for you depends on your project’s specific needs and complexity. Here’s a quick guide:
- For simple horizontal centering, the
text-alignproperty is a straightforward solution. - If you need both horizontal and vertical centering with minimal objection, the flexbox approach is efficient.
- The absolute positioning with transform method offers more control and flexibility but might require additional adjustments for different content sizes.
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.