CSS把視頻居中顯示

在網頁設計中，我們時常需要在頁面中嵌入視頻以呈現更好的展示效果。不過，如何讓這些視頻居中顯示呢？使用CSS能夠輕松實現這個效果。

.video{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

以上就是CSS代碼，我們先以一個video標簽為例：

<video class="video" src="foryou.mp4"></video>

對于CSS代碼，我們需要先將video的定位方式設置為絕對定位，這樣就可以讓它跳出正常文檔流的位置。

然后，通過設置top和left的值為50%，使視頻的定位點位于頁面中心。通過transform屬性的translate函數，以視頻的中心點為基準，向左和向上偏移自身寬高的50%，使視頻正好居中。

這樣，你就可以輕松實現CSS居中顯示視頻。當然，你可以根據自己的需求對CSS代碼進行更多的樣式定制。