纯CSS让视频始终居中的四种简单方法

前段时间看到一个有意思的视频展示效果,简而言之就是左右两个视频总是显示各自中间的部分。文章作者通过 JS 同时改变每个视频的视窗宽度和视频的位置来实现,属于底层操作,我觉得应该可以更简单一些,只要让视频始终处于容器中间就不用对视频进行位移了。本来想看看文章中提到的 beoplay 页面里是如何做的,结果已经打不开了。。没关系,反正我也做出来了,而且找到了4种方法,CSS 和 JS 均只控制 width,居中则由浏览器自动完成,请看效果

当时看到这个效果的时候,首先就想到了 flex 布局,因为常规布局下当图片以及视频内容宽度超过容器宽度时,常用的 text-aglin:center 和 margin:0 auto 已经无法让内容处于容器的中间,不行不行,给容器加上 overflow:hidden 也不行,但 flex 布局的居中却可以轻松实现此需求。

然后又在学习过程中,想到了另外3种办法:

继续阅读“纯CSS让视频始终居中的四种简单方法”