What does position-bottom mean in devtools?

Question

I'm experimenting with some transforms and animations using Velocity.js. One of the animations scales an element that's been absolutely positioned, but for some reason, I can't get the element to center.

According to Firefox Developer Edition's devtools, there's a negative position-bottom and position-right on the element, but I can't figure out where it's coming from. It's parent is static positioned and it's just a regular div with height: 100%.

Where could these be coming from?

Computed styles for div in question (while it's being scaled):

background-color: rgb(0, 0, 0);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
box-sizing: border-box;
color: rgb(9, 29, 35);
font-family: "PT Sans", sans-serif;
font-size: 16px;
height: 2139.52px;
left: 0px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
transform: matrix(0.00870397, 0, 0, 0.00870397, 0, 0);
width: 2139.52px;

and computed styles for parent div:

box-sizing: border-box;
color: rgb(9, 29, 35);
font-family: "PT Sans", sans-serif;
font-size: 16px;
height: 944px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
transform: matrix(1, 0, 0, 1, 0, 0);
width: 1920px;

Here's a jsbin for reference. The big black square should be centered, but it's not for some reason.

Answer 1

To answer your question's title :

position-bottom denotes the distance in pixels between the current element and its immediately positioned parent (in this case the body tag becomes the parent as no previous parent of the black-box is positioned i.e. all are positioned static [by default]).

Why the negative value though? shouldn't the distance be positive? given the dimensions of the black box is less than that of the parent?

It should be normally, but you have created a box that is bigger than the parent element and have scaled it down using transform properties. So when left = 0 and top = 0, the super big unscaled child is being positioned, not the scaled down version.

I will explain the math of the negative bottom position:

bottom-position = parentHeight - childOriginalHeight 
right-position = parentWidth - childOriginalWidth

Solution :

1. Position your parent element (position: relative / absolute) [refer relative vs absolute: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/]
2. Now use this CSS to center your black box

{
  ...    
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleX() scaleY();
  ...
}

Note:

1. (top = 50% and left = 50% css properties, position the child's boundaries (50% of the parent's dimensions from the top and left) with respect to the parent's boundaries, where as transform - translate moves the element, (-50% of that element's dimensions to the top and left) from that element's center). refer: https://css-tricks.com/centering-percentage-widthheight-elements/
2. Keep in mind multiple transform one line directives are applied from right to left
3. So scale down your element (remember that transforms in the right get applied first) and then translate it (which is what you are trying to do). .

Answer 2

You can use this css below to the div:

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width: auto;
margin:0 auto;