Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to center a div within another div?
To center a div is one of the most important aspects of front-end development. In this article, we will center a div inside another div using HTML and CSS.
We will have a parent div which shall have the child div. Our task would be to place the child div at the center of the parent div.
Different ways to Center a Child div
There are mltiple ways to center a child div, here we will show each approach with complete code.
CSS transform and position Property
To center a child div using CSS transform and position property we need to follow below mentioned steps.
- We will set the child's position absolute and the parent to relative. Next, we will move the child by 50% from the top and left of the parent div. Next, we will use the transform property of CSS to make the child div to the center.
- Now translate(x, y) function takes two values as its arguments, where x is the number of pixels to move the element horizontally, and y is the number of pixels to move the element vertically. So the element is being moved -50% of its width and -50% of its height, making it centered vertically and horizontally.
Example
In the following code we have used the above described approach to center a child div.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: green;
width: 50vw;
height: 50vh;
position: relative;
}
.child {
background-color: lightgreen;
Width: 25vw;
Height: 25vh;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h3>Center a Child div Element</h3>
<p>
Here in this example, we have used
CSS transform, and position property.
</p>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
CSS Grid Property
Here in this approach we will use the CSS display and place-items property to center a child div, it is one of the mostly used approach to center a child div.
- We will set the "display: grid;" property on the parent div element, so the div can be behave like a grid.
- Now the "place-items: center;" property on the grid will keep the child elements center aligned.
Example
In the following code we have used the above described approach to center a child div.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: green;
width: 50vw;
height: 50vh;
display: grid;
place-items: center;
}
.child {
background-color: lightgreen;
width: 25vw;
height: 25vh;
}
</style>
</head>
<body>
<h3>Center a Child div Element</h3>
<p>
Here in this example, we have used
CSS display, and place-items property.
</p>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
CSS Flex Box Property
Another popular method is to use the CSS flexbox property. Flex boxes are widely used elements in CSS.
- We first need to set the parent to be a flexbox, we will use the CSS "display: flex;" for that.
- Now to center the child dive vertically and horizontally we will use the CSS align-items & justify-content property.
Example
In the following code we have used the above described approach to center a child div.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: green;
width: 50vw;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
}
.child {
background-color: lightgreen;
width: 25vw;
height: 25vh;
}
</style>
</head>
<body>
<h3>Center a Child div Element</h3>
<p>
Here in this example, we have used CSS display,
align-items and justify-content property.
</p>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
Placing Multiple-Nested divs at the Center
Placing multiple nested divs inside a parent div is also an easy task. Suppose there are three divs, namely container, which is the parent div, first-child, which is the child of the container; and second-child, which is the child of the first child. Then we can first center align the first-child into the container div using the methods we discussed. Next, we can take the first-child as the parent of the second child and apply the same technique.
Example
As an illustration, we are showing the technique using one of the methods. Readers should try using the other two methods to perform similar tasks.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: red;
width: 50vw;
height: 50vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.first-child {
background-color: green;
width: 25vw;
height: 25vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.second-child {
background-color: blue;
height: 10vh;
width: 10vw;
}
</style>
</head>
<body>
<div class="container">
<div class="first-child">
<div class="second-child"></div>
</div>
</div>
</body>
</html>
Conclusion
In this article, we have understood how to center align the divs inside other divs using HTML and CSS. We understood three different techniques to center align the divs. We have used the position property, grid property, and flexbox property. Among them, the flexbox property is the most widely used and convenient.
5K+ Views
