案例一：使用 Flexbox 居中
我們可以使用 CSS Flexbox 來(lái)實(shí)現(xiàn) div video 的水平居中。Flexbox 提供了一種簡(jiǎn)單的方式來(lái)布局和對(duì)齊元素。下面是一個(gè)簡(jiǎn)單的示例代碼：
<div class="parent"> <div class="child"> <video src="video.mp4" controls autoplay></video> </div> </div>
上述示例中，我們創(chuàng)建一個(gè)父容器（class 為 parent）和一個(gè)子容器（class 為 child），視頻元素則放在子容器中。接下來(lái)，我們可以使用以下 CSS 代碼將子容器居中：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
max-width: 100%;
}通過(guò)設(shè)置父容器的 display 為 flex，我們可以啟用 Flexbox 布局。justify-content: center 和 align-items: center 屬性將子容器在水平和垂直方向上居中顯示。為了確保視頻元素的寬度不超過(guò)父容器，我們?cè)O(shè)置子容器的 max-width 為 100%。
案例二：使用 Grid 居中
除了 Flexbox，我們還可以使用 CSS Grid 來(lái)實(shí)現(xiàn) div video 的水平居中。Grid 允許我們以網(wǎng)格形式布局元素。以下是一個(gè)用 Grid 實(shí)現(xiàn)居中的示例代碼：
<div class="parent"> <div class="child"> <video src="video.mp4" controls autoplay></video> </div> </div>
在上述代碼中，我們同樣創(chuàng)建了一個(gè)父容器（class 為 parent）和一個(gè)子容器（class 為 child），視頻元素放在子容器中。下面是實(shí)現(xiàn)居中的 CSS 代碼：
.parent {
display: grid;
place-items: center;
}
.child {
max-width: 100%;
}通過(guò)設(shè)置父容器的 display 為 grid，我們啟用了 Grid 布局。place-items: center 屬性將子容器在水平和垂直方向上居中顯示。子容器的 max-width 屬性仍然用于限制視頻元素的寬度。
案例三：使用絕對(duì)定位居中
另一種實(shí)現(xiàn) div video 居中的方式是使用絕對(duì)定位。下面是一個(gè)簡(jiǎn)單的示例代碼：
<div class="parent"> <div class="child"> <video src="video.mp4" controls autoplay></video> </div> </div>
在上述示例中，我們同樣創(chuàng)建了一個(gè)父容器（class 為 parent）和一個(gè)子容器（class 為 child），視頻元素放在子容器中。接下來(lái)，我們可以使用以下 CSS 代碼將子容器居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
}通過(guò)將父容器的 position 屬性設(shè)置為 relative，我們創(chuàng)建了一個(gè)相對(duì)定位的參考框。子容器則使用絕對(duì)定位并通過(guò) top: 50% 和 left: 50% 將其定位到父容器的中心。transform 屬性和 translate(-50%, -50%) 可以調(diào)整子容器的位置，使其完全居中。同樣，為了限制視頻元素的寬度，子容器的 max-width 屬性被設(shè)置為 100%。
以上是幾種實(shí)現(xiàn) div video 居中的代碼案例。借助于 Flexbox、Grid 和絕對(duì)定位等 CSS 技術(shù)，我們可以輕松實(shí)現(xiàn)這一效果。選擇適合自己需求的方法，并根據(jù)需要進(jìn)行調(diào)整和進(jìn)一步優(yōu)化，以便在頁(yè)面中實(shí)現(xiàn)理想的布局效果。