Dash.js播放HLS视频时，视频封面无法居中显示怎么办？

Dev · 春景提问于 2026-02-14 19:08:25 阅读 17

交互

用Dash.js播放HLS视频时，我给视频加了个封面图，但无论怎么调整CSS都无法让封面在不同分辨率下居中显示。我尝试过绝对定位配合transform，但加载视频时封面会突然跳到左上角。

这是我的CSS代码：


.video-container {
  position: relative;
  width: 100%;
}
.video-cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px;
}

控制台没有报错，但实际效果就是无法保持居中，特别是手机横屏时偏移更严重。有没有遇到过类似情况？

Dash.js

我来解答赞 5 收藏

反馈

1 条解答

雅雯 Lv1

这个问题主要是因为视频容器的尺寸和封面图的定位冲突了，懒人方案是直接用flex布局搞定居中，简单又省事。

试试这个CSS，把 .video-container 改成这样：

.video-container {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 100%;

}

.video-cover {

  max-width: 800px;

  width: 100%;

}

别折腾绝对定位了，flex才是正解，手机横屏也能稳稳居中。

2026-02-14 20:03