Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I center text (horizontally and vertically) inside a div block?
Centering text inside a div block both horizontally and vertically is a common layout requirement in web development. CSS provides several methods to achieve this alignment, each with its own advantages and use cases.
Horizontal Text Centering Methods
Using the text-align Property
The text-align property is the most straightforward method for horizontal text centering. It determines how line boxes are aligned within a block-level element.
The text-align property accepts the following values
left Aligns text to the left edge of the container.
right Aligns text to the right edge of the container.
center Centers text within the container horizontally.
justify Stretches text to align with both left and right edges.
.centered-text {
text-align: center;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Text Centering</title>
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
text-align: center;
padding: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Text-Align Center Example</h2>
<div class="demo">
<p>This text in div is centered horizontally.</p>
</div>
</body>
</html>
The output shows the text centered horizontally within the orange div
Text-Align Center Example ??????????????????????????????????????????? ? This text in div is centered ? ? horizontally. ? ??????????????????????????????????????????? (Orange background with yellow border, text centered)
Using Flexbox with justify-content
Flexbox provides the justify-content property for horizontal alignment. This method offers more control and works well with modern layouts.
.flex-center {
display: flex;
justify-content: center;
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Horizontal Centering</title>
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
display: flex;
justify-content: center;
padding: 20px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Flexbox Center Example</h2>
<div class="demo">
<p>This text in div is centered horizontally using flexbox.</p>
</div>
</body>
</html>
Vertical Text Centering Methods
Using the padding Property
Equal top and bottom padding creates vertical centering by adding space above and below the content. This method works well when you know the content height.
.vertical-padding {
padding: 50px 0; /* Top and bottom padding */
}
Example
<!DOCTYPE html>
<html>
<head>
<title>Vertical Centering with Padding</title>
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
padding: 50px 0;
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Padding Vertical Center Example</h2>
<div class="demo">
<p>This text in div is centered vertically using padding.</p>
</div>
</body>
</html>
Using the line-height Property
The line-height property centers single-line text vertically by setting the line height equal to the container height.
The line-height property accepts these values
normal Browser sets a reasonable line height.
number Multiplies the font-size by this value.
length Sets an absolute line height value.
percentage Sets line height as a percentage of font-size.
Example
<!DOCTYPE html>
<html>
<head>
<title>Vertical Centering with Line-Height</title>
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
height: 150px;
line-height: 150px;
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Line-Height Vertical Center Example</h2>
<div class="demo">
This text is centered vertically using line-height.
</div>
</body>
</html>
Note The line-height method works best for single-line text only.
Complete Centering (Both Horizontal and Vertical)
Using Flexbox (Modern Approach)
Flexbox provides the most flexible and reliable method for centering text both horizontally and vertically using justify-content and align-items properties.
<!DOCTYPE html>
<html>
<head>
<title>Complete Centering with Flexbox</title>
<style>
.complete-center {
background-color: orange;
border: 3px solid yellow;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Complete Centering Example</h2>
<div class="complete-center">
<p>This text is perfectly centered both horizontally and vertically!</p>
</div>
</body>
</html>
Using CSS Grid (Alternative Modern Approach)
<!DOCTYPE html>
<html>
<head>
<title>Complete Centering with Grid</title>
<style>
.grid-center {
background-color: lightblue;
border: 3px solid navy;
height: 200px;
display: grid;
place-items: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Grid Centering Example</h2>
<div class="grid-center">
<p>This text is centered using CSS Grid!</p>
</div>
</body>
</html>
Method Comparison
| Method | Best For | Browser Support | Limitations |
|---|---|---|---|
| text-align: center | Simple horizontal centering | Universal | Horizontal only |
| Flexbox | Modern layouts, both directions | IE10+, all modern browsers | Learning curve |
| line-height | Single-line vertical centering | Universal | Single-line text only |
| Padding | Known content height | Universal | Requires known dimensions |
| CSS Grid | Complex layouts | Modern browsers (IE11+ partial) | Newer feature |
Conclusion
For modern web development, Flexbox
9K+ Views
