How to Put a Box Inside Another Box using CSS?

To put a box inside another box in CSS, you can use the position property in combination with the transform property. The position property is used with the top, bottom, left and right properties to set the position of the elements on the webpage.

On the other hand, the transform property is used to apply 2D or 3D transformations to an element such as rotate, scale, skew, translate, etc.

So, let’s first create two div elements that we will use to create boxes. Assign a class="outer" to the outer div and class="inner" to the inner div:

<div class="outer">
    <div class="inner">
        <!-- Add content here -->
    </div>
</div>

To make these divs like a box, give some width and height to each div and keep the inner div’s dimensions lower than the outer so that it can be placed inside of the outer div.

Now, if you want to place the inner box in the center of the outer box, set the outer box’s position to relative and the inner box’s position to absolute. This will allow you to position the inner box relative to the outer box.

After that, set the top and left properties to 50%, it will place the top-left corner of the inner box in the exact center of the outer box. This means we have to translate the inner box by -50% so that its center can be aligned with the outer box. It can be done by setting the transform property to translate(-50%, -50%).

Here is the full CSS code that you need to add to place the inner box in the center of the outer box:

div.outer{
    width: 200px;
    height: 200px;
    position: relative;
    border: 2px solid grey;
    background-color: aqua;
}

div.inner{
    width: 100px;
    height: 100px;
    position: absolute;   /* position relative to outer box */
    top: 50%;   
    left: 50%;
    transform: translate(-50%, -50%); /* translate box by -50% */
    border: 2px solid grey;
    background-color: orange;
}

After running the above code, you will get the following output:

Put a box inside another box with CSS position property

As you can see from the above output, the inner box is placed in the perfect center of the outer box.


Method 2: Use CSS Flexbox to Put a Box Inside Another

You can also use CSS flexbox module to put a box inside another. The flexbox module is a flexible layout module in CSS that lets you create responsive layouts without using the position and the float properties.

To put a box inside another box using flexbox, you have to first make the outer box a flex container which can be done by setting its display property to flex.

After that, you can use the justify-content and the align-items properties to align the inner box horizontally and vertically inside the outer box.

The justify-content property is used to align flex items horizontally whereas the align-items property is used to vertically align the flex items inside the flex container.

So, simply set the justify-content and the align-items properties to center to put the inner box in the exact center of the outer box:

div.outer{
    width: 200px;
    height: 200px;
    display: flex;  /* Make flex container */ 
    justify-content: center;  /* Center horizontally */
    align-items: center;  /* Center vertically */
    border: 2px solid grey;
    background-color: aqua;
}

div.inner{
    width: 100px;
    height: 100px;
    margin:  auto;
    border: 2px solid grey;
    background-color: springgreen;
}

Below is the outcome of the above code:

Put a box inside another box using CSS flexbox module

Conclusion

In this article, we learned how we can put a box inside another box using CSS.

Putting a box inside another box is quite simple with CSS. You can either use the position property in combination with the top, bottom, left, and right properties to control the position of the inner box.

OR, you can use the flexbox module of CSS. In this approach, you can use the justify-content and the align-items properties to control the position of the inner box horizontally as well as vertically.

Thanks for reading.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts