What is Div and Why Center a Div?
In short, a div is known for the content division element. It is a generic block-level element in HTML. With the help of Div, we can divide the web page into different sections to target each section with the help of CSS.
For example, if we want to add a block quote inside our webpage, then we have to take the help of <center> tag instead of being left-aligned like the rest of the body text. In this situation, we can wrap the whole text inside the <div> tag and then apply the CSS property. After doing this, the other remaining parts remain unaffected by the CSS property.
Utilizing <div> and <span> tags is valuable for the web developer beginner. With the help of <div> tag, a developer can prevent the content from stretching out of the edges of the content.
How to Center a Div in CSS
In CSS, there are various methods to center a div. Aligning the div element horizontally within a webpage is straightforward, while achieving vertical centering for the div element requires more effort. Now, let's delve into both techniques.
How to Center a Div Horizontally
We have to follow some steps to make the center div tag originally on the web page.
- First, we have to give the CSS class name "center".
- Then we have to go to the CSS file then we have to write .center as the CSS selector, and then we have to open the style brackets.
- Then, we have to set the element's width by either percentage or pixels, i.e., width: 50% or width: 500px. Then, we have to set the margin as auto. With the help of this, the div tag can auto-width, and the browser spills the remaining space equally between the margins of either side.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.centered-div {
width: 300px; /* Set the desired width of your div */
margin: 0 auto; /* Set the left and right margins to "auto" */
border: 2px solid red;
}
</style>
</head>
<body>
<div class="centered-div">
<h3>Welcome to C# Programming</h3>
<p>This is the example of a center div tag in Horizontally</p>
</div>
</body>
</html>
Output
How to Center a Div Vertically
We must follow the steps below to create the centered div tag vertically. The steps are:
- First, we have to give the CSS class name "center".
- Then we have to go to the CSS file then we have to write .center as the CSS selector, and then we have to open the style brackets.
- Then, we have to set the value of the position attribute as absolute. By doing this, it will take it as normal document flow.
- Then, we have to set the top property as 50%. It will tell the browser to place the div tag from the top edge 50% down the page, i.e., center the page vertically.
- Then, we must set the transform property as translate(0, -50%) .
NOTE: If we want, then we can also skip the last step. If we do this, then it will not place the div tag vertically. So, we need to define the transform property as the last property. At the same time, there are so many transformation methods. We can take the help of translate to move the div along the Y-axis of the page.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
position: relative;
height: 100vh; /* You can set the height of the container as needed */
}
.centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid purple;
/* Optional: Set the width of the centered element */
/* width: 50%; or any desired width */
}
</style>
</head>
<body>
<div class="container">
<div class="centered-div">
<h3>Welcome to C# Programming</h3>
<p>This is the example of center div tag in vertically</p>
</div>
</div>
</body>
</html>
Output
How to Center a Div Horizontally and Vertically
Whenever there is a need for both horizontal and vertical div tags on the webpage, then we have to follow the below steps to achieve this.
- First, we have to give the CSS class name "center".
- Then we have to go to the CSS file then we have to write .center as the CSS selector, and then we have to open the style brackets.
- Then, we have to set the value of the position attribute as absolute. By doing this, it will take it as normal document flow.
- Then, we have to set the left and top properties as 50%. It will tell the browser to place the div tag from the top and edge 50% down the page, i.e., center the page vertically and horizontally.
- Then, we have to set the transform property as translate(-50%, -50%) .
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
/* Apply styles to the parent container */
.container {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100vh; /* This ensures the container takes up the full viewport height */
}
/* Styles for the centered div */
.centered-div {
padding: 20px;
border: 2px solid #333;
background-color: #f2f2f2;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="centered-div">
<h3>Welcome to C# Programming</h3>
<p>This is the example of center div tag in both horizontally and vertically</p>
</div>
</div>
</body>
</html>
Output
How to Center a Div Within a Div
We have the option to insert a center div element within another div using three different methods. These three methods are outlined below.
1. Using the Position, Top, Left, and Margin Properties
We must follow the procedures below to create a center div tag inside another div.
- First, we have to wrap a div element inside another div element. The inner div behaves like a child, and the outer div behaves like a parent.
- Then, we have to give the CSS class name as "parent."
- Then, we have to set the height and width for the outer div. Then, we have to set the position property relative to the outer div.
- Then, we have to give the other CSS class name as "child."
- Then, we have to set the height and width for the inner div. Then, we have to set the position property to absolute for the outer div.
- Then, we have to set the left and top properties as 50%. It will tell the browser to place the div tag from the top and edge 50% down the page, i.e., center the page vertically and horizontally.
- Then, we have to set the transform property as translate(-50%, -50%) .
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
/* Apply styles to the outer container */
.parent {
position: relative;
width: 100%;
height: 400px;
background-color: #f2f2f2;
}
/* Styles for the inner container */
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center both horizontally and vertically */
width: 200px;
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
margin: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<h3>Welcome to C# Programming</h3>
<p>This is the example of center div tag in both horizontally and vertically</p>
</div>
</div>
</body>
</html>
Output
2. Using the Position, Top, Left, and Transform Properties
We can also create a div tag inside a div tag with the help of the transform property. To achieve this, we have to follow the below steps.
- First, we have to wrap a div element inside another div element. The inner div behaves like a child, and the outer div behaves like a parent.
- Then, we have to give the CSS class name as "parent."
- Then, we have to set the height and width for the outer div. Then, we have to set the position property relative to the outer div.
- Then, we have to give the other CSS class name as "child."
- Then, we have to set the height and width for the inner div. Then, we have to set the position property to absolute for the outer div.
- Then, we have to set the left and top properties as 50%. It will tell the browser to place the div tag from the top and edge 50% down the page, i.e., center the page vertically and horizontally.
- Then, we have to set the transform property as translate(-50%, -50%) .
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
/* Apply styles to the outer container */
.parent {
position: relative;
width: 100%;
height: 400px;
background-color: #f2f2f2;
}
/* Styles for the inner container */
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center both horizontally and vertically */
width: 200px;
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
margin: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<h3>Welcome to C# Programming</h3>
<p>This is the example of center div tag in both horizontally and vertically</p>
</div>
</div>
</body>
</html>
Output
3. Using Flexbox
We can also center the inner div tag with the help of the flexbox property. Using Flexbox is a great method to make a flexible web page. To achieve this, we have to follow the below steps.
- First, we have to go to the CSS file, and then we have to find the html and body selector. Then, inside the curly bracket of that selector, we have to set the height of both properties to 100%.
- First, we have to wrap a div element inside another div element. The inner div behaves like a child, and the outer div behaves like a parent.
- Then, we have to give the CSS class name as "parent."
- Then, we have to set the display property as flex. It will convert the parent container into a flex container.
- There, r has to set the align-items and the justify-content properties to the center.
- Then, we have to give the other CSS class name as "child."
- Then, we have to set the height and width of the inner div.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Apply styles to the outer container */
.parent {
display: flex;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
width: 100%;
height: 400px;
background-color: #f2f2f2;
}
/* Styles for the inner container */
.child {
width: 200px;
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<h3>Welcome to C# Programming</h3>
<p>This is the example of center div tag in both horizontally and vertically</p>
</div>
</div>
</body>
</html>
Output
How to Center Text in Div
With CSS, it's possible to align text in various ways. Alignment can be accomplished using the text-align property or by utilizing properties like line height and vertical-align. Below are the steps to achieve text centering using these methods.
How to Center Text in Div Horizontally
We have the ability to horizontally align text within a div by following two simple steps.
1. Using the Text-Align Property
To accomplish this, we need to proceed with the following steps.
- Initially, the CSS selector name should be specified as the center.
- Subsequently, the text-align property needs to be defined as center.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<p>Welcome to C# Programming</p>
</div>
</body>
</html>
Output
2. Using the Justify-Content Property
To achieve this, we have to follow the following steps:
- First, we have to give the CSS selector name as the center.
- Then, we have to set the display property as flex,
- Then, we have to set the justified content as the center.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="center">
<p>Welcome to C# Programming</p>
</div>
</body>
</html>
Output
How to Center Text in Div Vertically
It may pose a difficulty to arrange the content within the div element vertically. This can be accomplished by utilizing the methods outlined below.
1. Using the Padding Property
One technique to vertically align content within a div element involves utilizing the padding attribute. This attribute requires two values to be specified. The initial value should determine the top and bottom padding, while the subsequent value should determine the left and right padding. This approach allows for achieving the desired vertical alignment of content inside the div tag.
below steps.
- First, we have to provide the class name for the div tag as the center.
- Then, we have to write the CSS selector and some properties inside the opening and closing brackets.
- Then, we have to provide the padding property as 50px 0.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center {
border: 5px solid;
padding: 50px 0;
}
}
</style>
</head>
<body>
<div class="center">
<p>Welcome to C# Programming</p>
</div>
</body>
</html>
Output
3. Using the Line-Height Property
We can also create text inside the div tag vertically with the help of the line-height property. To achieve this, we have to follow the below steps.
- First, we have to provide the class name for the div tag as the center.
- Then, we have to write the CSS selector and some properties inside the opening and closing brackets.
- We have to provide the same size for the height and line height properties.
- Then, we have to create the CSS selector for the p tag.
- Then, we have to provide the display properties as the inline block.
- Then, we must set the line height as normal and the vertical alignment as middle.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center {
border: 5px solid;
height: 150px;
line-height: 150px;
}
p {
line-height: normal;
display: inline-block;
vertical-align: middle;
}
}
}
</style>
</head>
<body>
<div class="center">
<p>Welcome to C# Programming</p>
</div>
</body>
</html>
Output
3. sing the Align-Items Property
If w is taking the help of the display property to define the div as the flex container, then we also have to take the help of the align item, which contains the value as the center. To achieve this, we have to follow the below steps.
- First, we must go to the CSS file and then give the CSS class name as the center.
- We have to provide the CSS properties inside the open and close brackets in the CSS code.
- Then, we have to set the display property as flex, which makes the div container a flex container.
- Then, we have to set the aligned item as the center.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
border: 5px solid #333;
background-color: #f7f7f7;
box-sizing: border-box;
}
.center p {
font-size: 24px;
font-weight: bold;
color: #333;
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<p>Welcome to C# Programming</p>
</div>
</body>
</html>
Output