前段时间看到一个有意思的视频展示效果，简而言之就是左右两个视频总是显示各自中间的部分。文章作者通过 JS 同时改变每个视频的视窗宽度和视频的位置来实现，属于底层操作，我觉得应该可以更简单一些，只要让视频始终处于容器中间就不用对视频进行位移了。本来想看看文章中提到的 beoplay 页面里是如何做的，结果已经打不开了。。没关系，反正我也做出来了，而且找到了4种方法，CSS 和 JS 均只控制 width，居中则由浏览器自动完成，请看效果。
当时看到这个效果的时候，首先就想到了 flex 布局，因为常规布局下当图片以及视频内容宽度超过容器宽度时，常用的 text-aglin:center 和 margin:0 auto 已经无法让内容处于容器的中间，不行不行，给容器加上 overflow:hidden 也不行，但 flex 布局的居中却可以轻松实现此需求。
然后又在学习过程中，想到了另外3种办法：