CSS that aligns elements vertically horizontally relative to the parent element

Center vertically

50%; Transform:translatey (-50%);

1, position:relative;

Understanding: Relative is the relative meaning, here is relative to the parent element

2, top:50%;

Understanding: Height is 50%, which refers to the height of the parent without the 50%.

3, Transform:translatey (-50%);

Understanding: Move up 50% of the height of the element itself.

Center horizontally

50%; Transform:translatex (-50%);

Here is the sample code:

"height:500px; Background-color:gray; ">    <div style="position:relative; top:50%;left:50%; Transform:translatey ( -50%) TranslateX ( -50%); background-color:blue; width:200px; height:100px; ">    </div></div></body>
CSS that aligns elements vertically horizontally relative to the parent element