html - 在另一个中心 div

Question

我无法将一个 div 的内容置于另一个 div 的中心，因为内容没有显示。

#searchbkg {
  postition: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
}
#searchcentre {
  position: absolute;
  width: 50%;
  margin: 0 auto;
}

<div id="searchbkg">
  <div id="searchcentre">Test</div>
</div>

绿框出现，但里面没有文字。

Answer 1

您的文字看起来不错，但它不会居中，因为您在内部 div 上有 position: absolute;。将其更改为 position: relative; 它将水平居中。如果您需要文本在 div 中居中，您还可以应用 text-align: center;。

#searchbkg {
  position: relative;
  width: 100%;
  height: 700px;
  background-color: #85e085;
}
#searchcentre {
  position: relative;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid red;
}

<div id="searchbkg">
  <div id="searchcentre">This is a centered div!</div>
</div>