css - 标题区 div 未在标题 div 内居中对齐

Question

我有一个标题 div，在里面我有一个标题 div。我正在尝试将标题 div 居中对齐。当前，标题 div 左对齐。我可能只是非常昏昏欲睡，但我整天都在看代码，所以我的脑子很热。

html

<div class="wrapper">
  <div id="header">
    <div class="caption">First Caption - Health & Safety</div>
  </div>
</div>

CSS

#header {
 position:relative;
 width:1200px;
 height:400px;
 margin:auto;
 border:1px solid red;
}

.caption {
 position:absolute;
 width:1000px;
 height:140px;
 background-color: red;
 margin: auto;
}

Answer 1

请尝试删除

position:absolute;