css trasfrom

Question

*{
margin: 0px;
padding: 0px;
font-family: 'monospace',sansarif;

}
.main_div{

width: 400px;
height: 200px;
background-image: linear-gradient(to bottom right,#ff5722,blue);
transform: translate(-50%,-50%);
position: absolute;
top:50%;
left: 50%;
}
this the why to center a div so i dont understand that so plzzz help me to understand the code

Answer 1

So the first part is a wildcard, defaulting margin and padding to 0 (they’re using this to remove page spacing most likely).

The second part uses absolute positioning for the main_div so that the html inline page structure won’t mess the positioning of this div.

Then, using left and top 50% positioning, it pushes the div element halfway down and halfway across the entire rendered page, placing it in the middle.

Finally, since the ‘starting point’of the div itself will actually be in the upper left corner, theyre using transform: translate to move the element halway along the x and y axis to position it in the middle.

In all honesty, this is not really how you want to position things on a page, especially the main div. There are better ways to do this, but this works for projects or practice markup and what not.