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

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

交互

用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

我来解答赞 10 收藏

反馈

2 条解答

Tr° 溪纯 Lv1

问题在于你的 .video-container 没有高度，top: 50% 找不到基准。

两个方案：

方案一：flex布局（最简单）

.video-container {

  position: relative;

  width: 100%;

  height: 100%;

}



.video-cover {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  background: #000;

}



.video-cover img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}

关键是 .video-cover 直接撑满整个容器，然后用 flex 居中内容，这样不管容器尺寸怎么变都不会跳。

方案二：保持 absolute + transform（如果你需要封面比视频小）

.video-container {

  position: relative;

  width: 100%;

  padding-bottom: 56.25%; /* 16:9 比例 */

  height: 0;

}



.video-cover {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}



.video-cover img {

  max-width: 80%;

  max-height: 80%;

}

用 padding-bottom 保持宽高比，封面用 flex 居中，这样横屏也不会歪。

你之前用 transform 跳到左上角，基本就是容器没高度导致的，top: 50% 计算出来是 0。直接改用 flex 完事。

2026-03-12 16:11

雅雯 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