高级CSS -不了解此解决方案

Question

多亏了这个SO answer，我已经成功地将一个视频放入一个div中，并一直完全填充它。

我只对代码做了一点修改，但我不明白为什么这段代码可以工作。

    video
        position: absolute
        opacity: 0.1
        z-index: 0
        top: 0px
        left: 50%
        min-width: 100%
        min-height: 100%
        right: 0px
        margin: auto
        width: auto
        height: auto
        overflow-x: hidden
        transform: translateX(-50%)

我不知道转换是做什么的，也不知道如何让它固定在左上角以外的其他地方。我认为有一些关于min-属性的东西可以让它工作，但我不确定。

Answer 1

绝对定位的元素相对于其父元素(也可以是浏览器窗口)的位置由top或bottom和left或right参数定义(默认值为top: 0；left: 0;)。如果left为50%，则表示左侧边框恰好移动到容器的水平中间。transform: translateX(-50%)将它移回左边50% (由负值引起)，但这次是元素本身的50%。这会导致元素在水平方向上居中。overflow-x: hidden;确保元素不会与其容器重叠-溢出部分将保持不可见。

您可以使用top 50%; transform: translateY(-50%); overflow-Y: hidden;在垂直方向上执行相同的操作