位置底部在devtools中意味着什么？

Question

我正在尝试使用Velocity.js进行一些变换和动画。其中一个动画缩放了一个绝对定位的元素，但由于某种原因，我无法将元素置于中心位置。

根据Firefox Developer Edition的devtools，元素上有一个负面的position-bottom和position-right，但我无法弄清楚它来自哪里。它的父级是静态定位的，它只是height: 100%的常规div。

这些来自哪里？

有问题的div的计算样式（当它被缩放时）：

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;

父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供参考。大黑方应该居中，但不是出于某种原因。

Answer 1

要回答你的问题标题：

position-bottom表示当前元素与其直接定位的父元素之间的像素距离（在这种情况下，正文标记becomes the parent没有定位黑盒的前一个父元素，即所有元素都定位为静态[默认]）。

为什么负值呢？这个距离不应该是积极的吗？鉴于黑匣子的尺寸小于父母的尺寸？

它应该是正常的，但是您创建了一个比父元素大的框，并使用转换属性将其缩小。所以当left = 0和top = 0时，超大的未缩放的孩子正在被定位，而不是按比例缩小的版本。

我将解释负底部位置的数学：

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

方案：

1. 定位你的父元素（position：relative / absolute）[引用relative vs absolute：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/]
2. 现在使用此CSS来集中您的黑匣子

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

注意：

1. （top = 50％，left = 50％css属性，相对于父级边界定位子级边界（父级维度的50％），其中transform-translate移动元素，（ - 50％从该元素的中心开始，该元素的尺寸为顶部和左侧）。参考：https://css-tricks.com/centering-percentage-widthheight-elements/
2. 请记住，多个转换一行指令是applied from right to left
3. 因此缩小你的元素（请记住右边的变换首先应用），然后翻译它（这是你想要做的）。 。

Answer 2

你可以使用下面的css到div：

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