在响应式网站上的容器内中心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

只需在

中添加margin-left:-200px;即可

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

此处是更新的 fiddle file

Answer 2

您可以使用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>

Answer 3

<强> DEMO

补充：

1. top: 50%;和left: 50%;使其相对于其父级显示：.main { position: relative
2. 添加了transform: translate(-50%, -50%)以使其居中。把它放在自己的中心点上：D

Answer 4

您应该清除主容器中的浮动。

为此，请将其添加到主元素：

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

        <div class="clearfix"></div>
    </div>

    <style>
    /* Add this to your CSS */
    .clearfix{
       clear:both;
    }
    </style>

这将使主容器扩展到那些浮子的高度。之后你可以使用：

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

**OR** 

.center { 
    position:absolute;
    left: 50%;
    top: 50%;
    height:400px;
    background-color:black;
    width:400px;
    border-radius:50%;
    transform:translate(-50%,-50%); /* This property doens't rely on pixels of the element, so the element can also be defined in percentages */
    -webkit-transform:translate(-50%,-50%);
}

Answer 5

在您的代码中添加此css：

.center {
    background-color: #000000;
    border-radius: 50%;
    height: 400px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    width: 400px;
}

请参阅演示http://jsfiddle.net/JentiDabhi/gnhwork9/1/