Updated June 23, 2023
Introduction to CSS Center Div
CSS div tag is used to divide the code into different blocks. Using div for each block of the div tag, we can apply it in different CSS styles. Now div center means we have to align the div content in the center. It may be an image, plain content, buttons, choice boxes, headers, navigation bars, etc. When we got a situation to align text in the center position, we came up with two scenarios, whether the content is horizontally or vertically centered.
Therefore, CSS div center can be done in 2 ways
- Horizontally Center
- Vertically Center
How to Use Center Div tag in CSS?
We can use the center div tag horizontally or vertically based on our requirements.
1. Horizontally Center
If we must display a heading, we use a horizontal center div.
Syntax #1
selector
{
text-align: center;
}Syntax #2
selector
{
margin-left: auto;
margin-right: auto;
}2. Vertically Center
We must use a vertical center div if our requirement is a vertical center.
Syntax #1
selector
{
vertical-align: middle;
}Syntax #2
selector
{
top: 50%;
transform: translate(0, -50%);
margin: 0;
position: absolute;
}Real-time Example: I have booked some 100 pages; each 10th page is a new chapter. Then to easily recognize a new chapter, we keep it in the middle. So this kind of chapter heading scenario, we can use the div center property.
Examples to Implement CSS Center Div
Below are the examples to implement for the same:
Example #1. Header Div Horizontal Align
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Center Div
</title>
<style>
.centerDiv {
text-align: center;/*Keep the div header in the center horizontally*/
color: red;
}
.p
{
color: green;
font-size: 23px;
border: solid 2px brown;
}
</style>
</head>
<body>
<div class="centerDiv">
<h1>Chapter 1 Horizontal Center Align<h2>
</div>
<div class="p">
<p>CSS div tag is used to divide the code into different blocks. Using div each block of div tag we can apply different CSS styles. Now div center means we have to align the div content in the center. It may be image, plain content, buttons, choice boxes, headers, navigation bars etc. When we got a situation to align text in the center position, we come up with 2 scenarios, whether the content horizontally center or vertically center. Therefore CSS div center can be done in 2 ways
Horizontally center
Vertically center
</p>
</div>
<div class="centerDiv">
<h1>Chapter 2 Horizontal Center Align<h1>
</div>
<div>
<p class="p"><b>Real time Example:</b>I have book with some 100 pages, each 10th page is new chapter then to easily recognize new chapter we simply keep it in the middle. So this kind of chapter heading scenario we can use div center property.</p>
</div>
</body>
</html>Output:
Example #2. Plain text div Horizontal center
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Center Div
</title>
<style>
.centerDiv {
text-align: center;/*Keep the div plain text in the center horizontally*/
color: green;
font-size: 23px;
border: solid 2px navy;
}
</style>
</head>
<body>
<div class="centerDiv">
<p>My Name is Paramesh.</p>
<p>My Best friend is Amardeep.</p>
<p>My Name is Venkatesh.</p>
<p>My Best friend is Krishna.</p>
<p>My Name is Rajitha.</p>
<p>My Best friend is My Mother.</p>
</div>
</body>
</html>Output:
Example #3. Image div align center horizontally
Code:
<!DOCTYPE html>
<html>
<head>
<title>Center Div</title>
<style>
.centerDiv {
text-align: center; /*Keep the div header in the center horizontally*/
color: green;
font-size: 23px;
}
</style>
</head>
<body>
<div class="centerDiv">
<h1>Align image in center horizontally</h1>
<img alt="MyDog" src="d6.jpg">
</div>
</body>
</html>Output:
Example #4. Align Plain Text vertically center
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Center Div
</title>
<style>
h1
{
color: red;
text-align: center;
}
.mainDiv {
height: 200px;
position: relative;
border: 5px solid brown;
}
.divCenterr{ /*Keep the div plain text in the center vertically*/
margin: 0;
position: absolute;
color: blue;
font-size: 23px;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="mainDiv">
<h1>Align text in center vertically</h1>
<div class="divCenterr">
<p>I am learning Java.</p>
</div>
</div>
</body>
</html>Output:
Example #5. Image align vertically center
Code:
<!DOCTYPE html>
<html>
<head>
<title>Center Div</title>
<style>
h1 {
color: red;
text-align: center;
}
.mainDiv {
height: 400px;
position: relative;
border: 5px solid brown;
}
.divCenterr { /*Keep the div plain text in the center vertically*/
margin: 0;
position: absolute;
color: blue;
font-size: 23px;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</head>
<div class="mainDiv">
<h1>Align image in center vertically</h1>
<div class="divCenterr">
<img alt="MyDog" src="d6.jpg">
</div>
</div>
</body>
</html>Output:
Conclusion
It is used to align the text, image, header, buttons, etc., in the center of the page in either vertical or horizontal directions.
Recommended Articles
We hope that this EDUCBA information on “CSS Center Div” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
