CSS中其他两个div的中间div

Question

所以，我有一个关于我的三个div如何被假设的例子。我一直在玩这个位置：相对于容器然后位置：绝对在三个孩子的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

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

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

Answer 2

我认为唯一需要改进的是你对圆形元素进行定位的方式。给予它50％的绝对位置和半宽的负边距将确保无论尺寸如何，它都将处于良好的位置。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我认为在这种情况下使用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 +上受支持。