html - 在响应式站点的容器内将 div 置于中心位置超过四个 div

Question

这是我的图片:

我如何让黑色圆圈居中，我尝试了很多方法，最好一直使用绝对，但我无法使其响应。

它在 JSFIDDLE 上

代码如下:

HTML

<div class="main">
    <div class="center"></div>
    <div class="leftTop"></div>
    <div class="rightTop"></div>
    <div class="leftBottom"></div>
    <div class="rightBottom"></div>
</div>

CSS

.main {
    position:relative;
    width:100%;
    height:100%;
}

.rightTop {
    float:right;
    background-color:red;
    min-width:50%;
    height:250px;
}

.leftTop {
    float:left;
    background-color:blue;
    min-width:50%;
    max-width:50%;
    height:250px;
}

.rightBottom {
    float:right;
    background-color:yellow;
    min-width:50%;
    height:250px;
}

.leftBottom {
    float:left;
    background-color:orange;
    min-width:50%;
    max-width:50%;
    height:250px;
}

.center {
    position:absolute;
    left: 50%;
    top: 50%;
    height:400px;
    background-color:black;
    width:400px;
    border-radius:50%;
}

正如我上面所说，我已经设法使用 LEFT, TOP 将它居中，但它没有响应。它也不是我期望的 50%。

知道我做错了什么吗？

Answer 1

您可以为此使用 positioning(摆脱那些低效和可怕的 float 元素)，并结合 calc css3 属性。

您可能还对使用 vw 单位感兴趣，我曾在其中使圆响应屏幕宽度:

html,
body {
  margin: 0;
  padding: 0;
}
.wrap {
  margin: 5vw;
  height: 80vh;
  width: 90vw;
  display: inline-block;
  position: relative;
}
.wrap div {
  position: absolute;
  height: 50%;
  width: 50%;
}
.wrap .red {
  background: tomato;
  top: 0;
  left: 0;
}
.wrap .yellow {
  background: yellow;
  top: 0;
  left: 50%;
}
.wrap .green {
  background: lime;
  top: 50%;
  left: 0;
}
.wrap .blue {
  background: cornflowerblue;
  top: 50%;
  left: 50%;
}
.wrap .black {
  background: black;
  height: 20vw;
  width: 20vw;
  border-radius: 50%;
  top: -webkit-calc(50% - 10vw);
  top: calc(50% - 10vw);
  left: -webkit-calc(50% - 10vw);
  left: calc(50% - 10vw);
}

<div class="wrap">
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="black"></div>
</div>