Question

基本上，当浏览器窗口变大时，div会保持居中并在外部创建空白。当浏览器窗口变小时，我希望发生同样的事情。我想少看div，但要保持居中。目前，我看不到div，但是左侧锁定了，所以最终只能看到图像左侧部分（而不是中心）的一小部分。抱歉，如果这是一种要求我不熟悉编程的复杂方法。任何帮助将不胜感激！提前致谢！：）

p.s如果有人也可以帮助我，我也在努力播放视频

这是我目前的代码

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>

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

4 个答案: