当浏览器窗口小于 div 大小时，如何保持 div 中心？

Question

本质上，当浏览器窗口变大时，div 会保持居中并在外部创建空白区域。 当浏览器窗口变小时，我希望发生同样的事情。 我想看到更少的 div 但保持居中。 目前我看到的 div 较少，但左侧锁定，所以我最终只看到图像左侧部分（而不是中心）的滑动。 对不起，如果这是问我是编程新手的复杂方式。 任何帮助将不胜感激！ 提前致谢！ :)

ps 如果有人也可以提供帮助，我也很难播放视频

这是我目前的代码

 body { font-family: 'Noto Sans', sans-serif; margin: 0; padding: 0; } #page-container { width: 1920px; margin: auto; }

 <div id="page-container"> <video id="backgroundvid" width="auto" autoplay> <source src="assets/video/portalAnimLowRes.mp4" type="video/mp4"> </video> </div>

Answer 1

你可以试试

#page-container {
    width:1920px;
    margin-left: -960px;
    position: relative;
    left: 50%;
}        

Answer 2

您可以将 pageContainer 放在absolute位置，如下所示。

#page-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1920px;
}

Answer 3

你真的想要水平滚动条吗？

如果你不这样做，我不想定义宽度（尤其是像素），因为每个设备的宽度都不同。

相反，您可以将宽度定义为width:100%或width:100vw ，这有助于根据屏幕尺寸适应 div。

你可以试试这个代码：

body {
  font-family: 'Noto Sans', sans-serif;
  margin: 0 auto;
  padding: 0;
}
#page-container {
  width: 100%;
  margin: auto;
}

Answer 4

使用 flexbox 怎么样？

 body { font-family: 'Noto Sans', sans-serif; margin: 0; padding: 0; } #page-container { width: 1920px; display: flex; align-items: center; justify-content: center; }

 <div id="page-container"> <img src="https://placeimg.com/640/480/any"> </div>