How to center a div within another div?

HTML Web Development Front End Technology

Introduction

Center aligning of the divs is one of the most important aspects of front-end development. In this article, we will understand techniques to center a div inside another div using HTML and CSS.

Throughout this tutorial, 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.

Use Transform Translate and position Syntax

This is not a very popular method to center align one div inside another

Syntax

left:50%;
top:50%;
Transform: translate(-50%, -50%);

The above syntax does the following −

The CSS rule "left:50%;" sets the horizontal position of an element to be 50% from the left of its container.
The rule "top:50%;" sets the vertical position of an element to be 50% from the top of its container.
The rule "transform: translate(-50%, -50%);" shifts the element -50% horizontally and - 50% vertically, effectively positioning the element's center at 50% from the left and top of its container.

This is, however, not a popular method to bring a div into the center of another div. This is because of the following −

This requires extra five lines of code, which is more than the other methods.
One has to define the position of the parent and the child div, which may later create inconvenience in designing the other associated divs.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container{
      background-color: red;
      width:50vw;
      height:50vh;
      position: relative;
   }
   .child{
      background-color: yellow;
      Width: 25vw;
      Height: 25vh;
      position: absolute;
      left:50%;
      top:50%;
      transform:translate(-50%, -50%);
   }
</style>
</head>
<body>
   <div class="container">
      <div class="child">
      </div>
   </div>
</body>
</html>

Explanation

In the above example, we first declared the child's position absolute and the parent relative. Next, we moved the child by 50% from the top and left of the parent div. Next, we used the transform property of CSS to make the child div to the center.
The 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. In this case, the element is being moved -50% of its width and -50% of its height, making it centered vertically and horizontally.

Use The Grid Property

A more popular method to center align the divs inside the other is to use the grid property of CSS; however, for that one, first need to declare the divs to be grids.

Syntax

place-items: center;

The place-items property aligns the items with the grid container horizontally and vertically. We can only use the property with grid containers.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container{
      background-color: blue;
      width:50vw;
      height:50vh;
      display: grid;
      place-items: center;
   }
   .child{
      background-color: yellow;
      width:25vw;
      height:25vh;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="child">
      </div>
   </div>
</body>
</html>

Use The Flex Box Property

Another method we can use is the flexbox property of CSS. We first need to declare the parent to be a flexbox. Flex boxes are widely used elements in CSS. They are very convenient to use since they are responsive elements and the programmers often have very good control over flexbox properties.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container{
      background-color: purple;
      width:50vw;
      height:30vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }
   .child{
      background-color: green;
      width:25vw;
      height:10vh;
   }
</style>
</head>
<body>
   <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.

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.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<style>
   .container {
      background-color: red;
      width: 50vw;
      height: 30vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }
   .first-child {
      background-color: green;
      width: 25vw;
      height: 20vh;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
   }
   .second-child {
      background-color: yellow;
      height: 10vh;
      width: 20vw;
   }
</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. They use the position property, grid property, and flexbox property. Among them, the flexbox property is the most widely used and convenient.