高级 CSS - 不理解这个解决方案答案

【问题标题】：Advanced CSS - Don't Understand This Solution高级 CSS - 不理解这个解决方案
【发布时间】：2016-05-15 08:23:44
【问题描述】：

感谢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- 属性可以使这项工作发挥作用，但我不确定。

【问题讨论】：

transform 与 left 属性结合使用是一种强制可变宽度元素居中的方法。首先，您从容器的左侧往前走 50% 到达容器的中心，然后往后走 50%（负 X），其中 50% 代表视频元素宽度的 50%。通常，margin: auto 会将元素居中，但该元素需要是固定宽度。这种策略允许它处理宽度未知或变化的元素。

标签： html css sass

【解决方案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;垂直做同样的事情

【讨论】：