使用CSS使video居中 我們經常需要在網頁上使用視頻來展示內容。但是，如何讓視頻居中呢？CSS可以輕松地解決這個問題。下面我們來學習如何使用CSS使視頻居中。 首先，我們需要了解Video標簽的基本結構。Video標簽內嵌的內容是視頻源或者視頻鏈接等相關屬性。

<video poster="videoimg.jpg" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>

其中，poster屬性用于定義視頻封面圖片，而controls屬性用于顯示視頻控制面板，默認顯示。 接下來，我們需要使用CSS來使視頻居中。我們可以將Video標簽設置為塊元素，并使用margin屬性來設置它的上下左右外邊距為“auto”，這樣就可以實現視頻居中了。

<style> video{ display:block; /* 將Video標簽設置為塊元素 */ margin: auto; /* 設置上下左右外邊距為“auto” */ } </style>

使用上述CSS樣式，視頻就可以居中了。接下來，我們可以根據需求調整視頻大小，以達到更好的視覺效果。

<style> video{ display:block; margin: auto; width: 80%; /* 設置寬度為80% */ height: auto; /* 設置高度自適應 */ } </style>

在上述樣式中，我們可以看到width屬性被設置為80%，意味著視頻寬度占據其容器的80%。而height屬性被設置為auto，可以根據視頻寬度自適應調整高度，這樣使得視頻不會變形，并且在不同設備上表現良好。 總之，在網頁中使用視頻時，我們可以結合Video標簽和CSS來實現視頻居中，以更好地展示我們的內容。