video标签默认为inline元素，水平居中必须先设display: block和明确width，再用margin: 0 auto；垂直居中需父容器flex布局并设高度，配合justify-content和align-items。
video 标签本身怎么水平居中
直接写 <video> 不会居中，因为它默认是 display: inline（行内级替换元素），margin: 0 auto 对它完全无效。想让它水平居中，必须先“转块”再设宽：
- 给
<video>加display: block，否则margin: 0 auto不起作用 - 必须显式设置
width（比如width: 640px或width: 80%），100% 宽度没剩余空间可分 - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为
错误写法：<video style="margin: 0 auto;"> → 没反应；正确写法：<video style="display: block; width: 640px; margin: 0 auto;">
让 video 在父容器里水平+垂直完全居中
只靠 margin: 0 auto 永远做不到垂直居中。现代最稳的方案是 Flex 布局，但要注意父容器必须有明确高度：
- 父容器加
display: flex、justify-content: center（水平）、align-items: center（垂直） - 父容器需设
height（如height: 100vh或固定值），否则align-items: center无效果 -
<video>本身不用设width或height，但建议加max-width: 100%防溢出
常见坑：在 <body> 直接加 display: flex，结果整个页面布局错乱——应该包一层 <div class="video-container"> 再设 flex。
立即学习“前端免费学习笔记（深入）”；
自定义控件（如播放按钮、进度条）怎么居中对齐
浏览器原生控件（controls 属性启用的）无法用 CSS 精确调整位置；但如果你用 JS 自建控件，它们本质就是普通 HTML 元素，居中逻辑和其它元素一致：
- 按钮类控件（
<button>）：设display: block+margin: 0 auto可水平居中；垂直居中得靠父容器 flex 或 line-height - 进度条（
<input type="range">或自绘<div>）：通常作为行内元素存在，text-align: center在父容器上生效，而非直接作用于它自身 - 所有自定义控件都受父容器
position影响：如果父容器是position: relative，你才能用position: absolute+transform: translate(-50%, -50%)精准锚定中心点
别忘了：自定义控件的 z-index 要足够高，否则会被原生控件遮盖；且 pointer-events: none 之类属性可能意外禁用点击。
响应式视频居中时容易忽略的细节
宽度随屏幕变化时，margin: 0 auto 依然有效，但垂直方向极易失效——因为高度往往是内容驱动的，不是固定值：
- 用
aspect-ratio: 16/9替代固定height，配合 flex 布局，能保证缩放时仍居中 - 避免用
line-height垂直居中视频：它只对单行文本可靠，对<video>这种替换元素基本无效 - 移动端 Safari 有时会忽略
align-items: center，加min-height: 100vh比单纯height: 100vh更稳妥
真正麻烦的不是“怎么居中”，而是“居中后是否还保持可交互、不被裁切、不破坏语义结构”——这些往往要靠组合策略，而不是单一样式。
