WordPress站点CSS横幅视频宽屏显示无法居中对齐问题求助

宽屏下视频贴左是三个样式错误共同导致的：

• 媒体查询中给.banner_sec写了无效属性position: center，position属性不存在center这个合法值，该条规则会被浏览器直接丢弃
• 错误地将mp4视频地址写在background-image属性中，CSS背景图不支持加载视频资源，该规则完全不生效，页面实际渲染的是类名为.background-video的video元素
• 原.background-video样式仅设置了left: 0; top: 0，没有做居中偏移。当宽屏下容器宽高比和视频原始宽高比不匹配时，object-fit: cover会默认以左上角为基准裁剪填充，直接导致视频贴左显示

1. 清理.banner_sec规则内混入的HTML注释内容，CSS不支持HTML格式的注释，避免潜在解析问题；整段删除@media (max-width: 5000px)下的.banner_sec规则：该媒体查询覆盖几乎所有显示设备，内部属性要么和外部规则重复，要么是无效值，属于冗余错误代码
2. 给.banner_sec添加overflow: hidden属性，避免视频缩放时溢出容器边界
3. 修改.background-video的定位规则，替换原有左上角定位为绝对居中定位，保证任何屏幕尺寸下视频都以容器中心为基准做cover裁剪

.banner_sec{
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 700px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.banner_overlay{
    background-color: #00000000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.background-video {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    /* 替换原left:0; top:0; 实现水平垂直双向绝对居中 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
/* 其余原有样式保持不变即可 */

注意：确认HTML结构中<video class="background-video">是.banner_sec的直接子元素，不要嵌套在其他带定位属性的父容器内，否则居中定位会出现偏移。

内容的提问来源于stack exchange，提问作者Stash。