以最大宽度居中绝对定位的 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

最简单的方法是将标题包装在绝对容器中：

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>