How to Center Text in CSS?
Last Updated :
16 Oct, 2024
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.
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.
HTML
<!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:
Using Text Align2. 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.
HTML
<!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:
Using Flexbox3. 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.
HTML
<!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:
Using CSS GridHow 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.
HTML
<!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:
Using Line HeightUsing 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.
HTML
<!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:
CSS Position and TransformCentering 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.
HTML
<!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:
Similar Reads
How to Center Text in HTML?
To center text in HTML, we can use CSS text-align: center property. It aligns the text to center horizontally. The <center> tag was used in older versions to center the text horizontally, but it is depreciated in HTML 5.Center Text using center TagThe <center> tag is a block-level elemen
1 min read
How to Centre a List in CSS?
Lists are a common element in web design, used for navigation menus, item displays, and more. Centering a list in CSS can enhance the visual structure of a webpage, making it more aesthetically pleasing and user-friendly. There are multiple ways to achieve this, each using different CSS properties a
2 min read
How to Center an Image in CSS?
To center an image in CSS, we will align the image to the container horizontally and vertically as the layout requires.Center Images Horizontally1. Using text-align PropertyThe simplest way to center an image horizontally within a block-level container is to use the text-align property. This method
3 min read
How to Center a Button in CSS?
To Center a button in CSS is a common task in web design, especially when aiming for clean, user-friendly interfaces. Whether it's on a form or in the middle of a page, a centered button draws attention and improves usability. Around 85% of modern websites implement centered buttons in key areas lik
3 min read
How to Center a Table with CSS ?
Here are different ways to center table in CSS.1. Center a Table using margin auto propertyThe CSS margin is used to set the space around the element. The margin auto enables dynamic and equal margins from both sides and center the element. Syntaxtable { margin: auto;}By setting the margin auto the
2 min read
How to Center a Table in Google Docs
Ever wish your tables in Google Docs could be the center of attention? Well, good news! Imagine your info standing tall, right in the middle, no more hiding on the sides. Google Docs tends to keep things to the left, but we're here to break the norm. In this guide, we're not just talking about cente
6 min read
How to Center the Text in Bootstrap ?
To center text in Bootstrap, you can use the class "text-center" on the parent element of the text you want to center. This class aligns the text horizontally in the center of its container, providing a simple and effective way to achieve centered text styling within Bootstrap layouts. Table of Cont
2 min read
How to Vertically Center Text with CSS?
Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element.1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically cen
2 min read
How to Center Form in HTML?
In HTML, forms are typically displayed as a block element, taking up the full width of their container. While this is often desirable, there are times when you might want to center a form within its container for aesthetic or layout purposes. We will discuss different Methods to center form in HTML:
3 min read
How to Align Text in Bootstrap Column ?
In Bootstrap Framework, we can align the text within the columns using various utility classes. To align text within a Bootstrap column, use the built-in utility classes such as text-start, text-center, and text-end for the left, center, and right alignment, respectively. Simply apply the desired cl
3 min read