CSS中其他两个div中间的中心div

Question

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

.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

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

但是，第三个 DIV #round-image 似乎没有在中间正确对齐，因为使用了绝对长度 px 和百分比来调整/定位框的大小。

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

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+ 上支持。

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

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

如果你不关心验证，那么你可以简单地将中心标签和你想要的 div 放在它们标签之间的中间，或者你可以使用 CSS 的“边距”方面将其对齐在中心