保持绝对定位的边距和窗口调整大小的居中div

Question

我的页面上有几个div，用作容器。以下是其中一个div的示例CSS代码：

people.id = previous_person.parentId

这是我标题的中心容器。还有其他几个容器，我用simillar方式（绝对，居中和宽度为％）。

问题是，当我调整窗口大小时，所有这些容器都会点击浏览器窗口的左侧。我想在特定的窗口宽度上节省一些余量。我怎样才能做到这一点？

P.S。如果我添加header { background-color: #fff; height: 153px; width: 97%; min-width: 1084.06px; margin: 15px auto; position: absolute; left: 0; right: 0; border-radius: 20px; } ，则会破坏div的中心位置

Answer 1

您可以使用媒体查询，媒体查询仅适用于特定条件，例如特定宽度。

例如，以下背景颜色规则不适用于宽于 480px 的屏幕：

@media screen and (max-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

有关媒体查询的详情，请参阅this w3schools page

Answer 2

添加另一个保证金权利 然后根据你的使用情况将其拉直