Text Centering ensures that the text appears in the middle of a container or the entire page, which can create a balanced and visually appealing layout. CSS can provide multiple ways to achieve text centering, depending on the context, such as horizontally or vertically centering within the container, a flexbox, or a grid.
There are several approaches to center text using CSS.
Table of Content
How to Center Text Horizontally
1. Using Text Align
The simplest way to center text horizontally within a block-level element is by using the text-align property.
The text-align property in CSS can be used to define the horizontal alignment of the text within the block-level container. This property can work by aligning the text relative to the starting and ending edge of the containing block, distributing the equal space on either side of the text.
Syntax:
.center-text {
text-align: center;
}
Example: This example shows Centering Text Horizontally Using the text-align property.
<!DOCTYPE html>
<html>
<head>
<style>
.center-text {
text-align: center;
border: 1px solid black;
width: 300px;
padding: 20px;
}
</style>
</head>
<body>
<div class="center-text">
<h1 style="color: green;">GeeksforGeeks</h1>
<p>This text is centered horizontally
using text-align.
</p>
</div>
</body>
</html>
Output:
2. Using Flexbox
Flexbox is a layout module that can also be used to center text. By setting the display of the container to flex and using the justify-content property, you can easily center text horizontally.
Syntax:
.flex-center {
display: flex;
justify-content: center; /* Centers content horizontally */
height: 200px;
}
Example: This example shows Centering Text using Flexbox.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-center">
<h1 style="color: green;">GeeksforGeeks</h1>
<p>This text is centered using Flexbox.</p>
</div>
</body>
</html>
Output:
3. Using CSS Grid
CSS Grid is another layout system that provides a straightforward way to center text. By defining a grid container and using the place-items property, you can achieve perfect centering.
Syntax:
.grid-center {
display: grid;
place-items: center; /* Centers content horizontally and vertically */
height: 200px;
}
Example: This example shows Centering the Text using CSS Grid.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-center {
display: grid;
place-items: center;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="grid-center">
<h1 style="color: green;">GeeksforGeeks</h1>
<p>This text is centered using CSS Grid.</p>
</div>
</body>
</html>
Output:
How to Center Text Vertically
1. Using Line Height
For single-line text, you can use the line-height property to vertically center text within a block element.
Syntax:
.line-height-center {
line-height: 100px; /* Set line-height equal to container height */
}
Example: This example shows the vertical Centering using line-height.
<!DOCTYPE html>
<html>
<head>
<style>
.line-height-center {
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="line-height-center">
<h1 style="color: green;">GeeksforGeeks</h1>
<p>This text is vertically centered
using line-height.
</p>
</div>
</body>
</html>
Output:
Centering Text using CSS Position and Transform
Using the CSS positioning with position: absolute and the transform property is the method for centering the elements both horizontally and vertically. This method positions the element absolutely in the relation to its nearest positioned ancestor. The transform property can be used to offset the element by half its own width and height, achieving centering.
Syntax:
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example: This example shows the Absolute Centering using CSS position and transform.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
border: 1px solid black;
}
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="absolute-center">
<h1 style="color: green;">GeeksforGeeks</h1>
<p>This text is centered using position and
transform.
</p>
</div>
</div>
</body>
</html>
Output:
Centering Text in a Block Element
When centering text in block elements, it’s important to ensure that the element itself has a defined width. If the width is set to 100%, it may not visibly center. Adjust the width as needed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Text in Block Element</title>
<style>
.block-element {
width: 300px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="block-element">
<h2>This Text is Centered in a Block Element</h2>
</div>
</body>
</html>
Output:
