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:
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:
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.