html - 以最大宽度居中绝对定位的 div

Question

我是网页设计的新手，需要一些帮助/建议，即使是最简单的事情，直到我习惯为止。现在我的问题:

我有一个绝对定位的 div(实际上将成为我的标题)，它覆盖了一个画廊。现在我希望它水平居中并且响应迅速(具有最大宽度)。由于我还不习惯使用 CSS，所以我会遇到一些奇怪的行为。

header {
  position: absolute;
  width: 100%;
  max-width: 1000px;
  /*put padding or margin here*/

  font-size: 0px;
  top: 0;
  z-index: 10;
}

据我了解:我继承了父级的宽度。但是现在当我在左侧和右侧添加边距或填充时，宽度明显超过了父级的宽度(这意味着标题的内容在右侧溢出并且我得到了一个垂直滚动条)。我应该怎么做才能获得我想要的行为？

提前致谢

世界树

Answer 1

最简单的方法是将 header 包装在绝对容器中:

div {
  position:absolute;
  width:100%;
  left:0;
  }
header {
  max-width:1000px;
  margin:auto;
  background:tomato;
  }

<div><header>header, run me in full page mode</header></div>