devtools中的bottom-bottom是什么意思？

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表示当前元素与其紧邻的父元素之间的距离（以像素为单位）（在这种情况下， body标签 becomes the parent为否）黑匣子的上一个父项已定位，即所有[默认情况下]都静态定位。）。

为什么为负值？距离不应该是正数吗？给定黑盒子的尺寸小于父盒子的尺寸？

应该正常，但是您创建了一个比父元素大的盒子，并使用转换属性将其缩小。因此，当left = 0和top = 0时，将定位超大的未缩放子级，而不是缩小版本。

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

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

解决方案：

1. 定位您的父元素（位置：相对/绝对） [请参考相对还是绝对：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-translation >将元素移动 （该元素尺寸的-50％从该元素的中心移到顶部和左侧） ）。 引用： https://css-tricks.com/centering-percentage-widthheight-elements/
2. 请紧记applied from right to left是多个变换一行指令
3. 因此按比例缩小元素（请记住先进行正确的变换），然后再进行翻译（这是您要尝试的）。 。

Answer 2

您可以在div中使用以下CSS：

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