Introduction to CSS Center Div
CSS div tag is used to divide the code into different blocks. Using div each block of div tag we can apply 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 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
How to Use Center Div tag in CSS?
We can use center div tag either horizontally or vertically based on our requirements.
1. Horizontally Center
If our requirement is to display heading then we use horizontal center div.
Syntax #1
selector
{
text-align: center;
}Syntax #2
selector
{
margin-left: auto;
margin-right: auto;
}2. Vertically Center
If our requirement is a vertical center than we have to use vertical center div.
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 with some 100 pages, each 10th page is a new chapter then to easily recognize a new chapter we simply keep it in the middle. So this kind of chapter heading scenario we can use 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 either in the vertical or horizontal direction.
Recommended Articles
This is a guide to CSS Center Div. Here we discuss an introduction to CSS Center Div along with how to use this tag, and examples to implement this tag. You can also go through our other related articles to learn more –
