在 CSS 中的其他两个 div 中间居中 div

Question

所以，我有这个例子说明我的三个 div 应该是怎样的。我一直在玩弄容器中的 position:relative，然后是三个子 div 中的 position:absolute。问题是我觉得这不是最好的方法。你们有什么感想？这是我目前拥有的代码：

.container{
  position: relative;
  height: 100%;
}

#top-div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
}

#bottom-div{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
}

#round-image{
  position: absolute;
  left: 35%;
  top: 30%;
  z-index: 20;
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

Answer 1

你想要我想象中的中间圆圈吗？

如果您不关心验证，那么您可以简单地将中心标签和您想要的 div 放在它们标签之间，或者您可以使用 [=15] 的 "Margin" 方面=] 使其居中对齐

Answer 2

我认为唯一需要改进的是将圆形元素居中定位的方式。给它 50% 的绝对位置和半宽负边距将确保无论尺寸如何，它都会在一个好的位置。

.container{
  position: relative;
  height: 700px;
  width: 100%;
}

#top-div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: black;
}

#bottom-div{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: grey;
}

#round-image{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: 300px;
  height: 300px;
  margin-left: -150px;
  margin-top: -150px;
  border-radius: 50%;
  background: pink;
}

<div class="container">
  <div id="top-div">
    </div>
  <div id="round-image">
    </div>
  <div id="bottom-div">
    </div>
  </div>

Answer 3

在这种情况下使用absolute定位我没有发现任何问题，如果它满足您的需求，就可以使用它。

但是第三个 DIV #round-image 似乎没有在中间正确对齐，因为混合使用了绝对长度 px 和 sizing/positioning 的百分比盒子.

考虑到以下标记，问题可以通过以下方式解决：

1. 在第三个 DIV.

上使用负边距

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}

.container{
  position: relative;
  min-height: 100%;
}

#top-div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #222;
}

#bottom-div{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #999;
}

#round-image{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: 300px;
  height: 300px;
  margin-top: -150px;
  margin-left: -150px;
  border-radius: 50%;
  background-color: tomato;
}

<div class="container">
  <div id="top-div"></div>
  <div id="bottom-div"></div>
  <div id="round-image"></div>
</div>

2. 或者使用 calc() 函数：

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}

.container{
  position: relative;
  min-height: 100%;
}

#top-div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #222;
}

#bottom-div{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #999;
}

#round-image{
  position: absolute;
  left: calc(50% - 150px);
  top: calc(50% - 150px);
  z-index: 20;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: tomato;
}

<div class="container">
  <div id="top-div"></div>
  <div id="bottom-div"></div>
  <div id="round-image"></div>
</div>

3. 或者使用 CSS transform:

html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}

.container{
  position: relative;
  min-height: 100%;
}

#top-div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #222;
}

#bottom-div{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #999;
}

#round-image{
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%); /* vendor prefixes ommited due to brevity */
  border-radius: 50%;
  background-color: tomato;
}

<div class="container">
  <div id="top-div"></div>
  <div id="bottom-div"></div>
  <div id="round-image"></div>
</div>

值得注意的是，最后两种方法仅在 IE9+ 上支持。

在 CSS 中的其他两个 div 中间居中 div

Center div in middle of other two divs in CSS

html

css

position

vertical-alignment