Position Absolute

I am really having difficult time in understanding position Absolute. Can someone please explain how the below code is centering the cube horizontally as well as vertically.

<style>
  .heart {
    position: absolute;
    background-color:pink;
    height:50px;
    width:50px;
    margin:auto;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    transform:rotate(-45deg);
  }
</style>
<div class="heart">
</div>

    top:0px;
    left:0px;
    bottom:0px;
    right:0px;

This is telling the container where it’s static position is. Trying playing with these values and moving it around the page.

How can an element be
‘top:0px;’
‘left:0px;’
‘bottom:0px;’
‘right:0px;’
if it is not covering the whole body.

so I opened a code pen to show…

The position means the container is 0px from the edge of the “screen”

Now if I change one of the parameters to 100px it will push it away from the edge.

like I previously suggested play with the position parameters and move the object around the screen.

@gaurav-dogra When you specify the style of an element to have an absolute position, the browser will take the element out of the natural flow of the page and position the element according to the closest ancestor. If there is no ancestor element to use as a point of reference, the absolute positioned element will use the body as a reference point.

In reference to your code, inputting the top, right, bottom, and left to be 0px will tell the browser to position the element equidistant from all sides.