html – How to center the two squares inscribed in the biggest square with CSS?

Question:

I would like to leave the three squares in the code below, centered symmetrically in relation to the center of the largest square that has the black background.

.box{
	height: 100px;
	width:  100px;
	background: pink;
	margin:0 auto;
	padding: 20px 20px 20px 20px; 
	
}
 .box2{	
    height: 200px;
	width:  200px;
	background: red;
	margin: 0 auto;
	padding: 20px 20px 20px 20px; 
}
 .box3{
    height: 300px;
	width:  300px;
	background: black;
	margin: 0 auto;
	padding: 20px 20px 20px 20px; 
}
<div class="box3">
	<div class="box2">				
	       <div class="box">
	       </div>
       </div>
 </div>

Também esta no jsfiddle .

Answer:

Just set the margin property in the CSS of the inner squares. Using percentage it is possible to calculate the distance you want to give to each end. In the case of margin: 10% auto; , I'm saying that the top and bottom margins will be 10% the size of the div that contains it, and that the left and right margins will automatically be the same size.

Remember that the order of the margins in the margin property are: top, right, bottom, left. By specifying just one value, all margins will be the same size; two values ​​the margins will be mirrored; three and four follow the original rule: top, right, bottom, left.

See behavior in jsfiddle .

Scroll to Top