flex布局使视频自适应代码

最近遇到项目，首页轮播图加载全屏视频，静音自动播放，由于网站是自适应，所以视频始终无法自动居中，百度好久方法，插件也用了好几个，感觉都不好使，终于找到视频自适应居中的方法。只用css就行，归根结底用的还是flex布局应用。

html结构

<div class="videoHero">
	<div class="video-warp">
		<video src="视频链接" poster="视频封面" muted loop autoplay playsinline></video>
	</div>
</div>

css代码

.video div.videop {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-moz-box-orient: horizontal;
	-moz-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: space-around;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	height: 100vh;
	min-height: 800px;
	overflow: hidden;
}

video{
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate3d(-50%,0,0);
	transform: translate3d(-50%,0,0);
}