在响应式网站的容器中将 div 置于四个 div 的中心

Question

这是我的图片：

如何让黑色圆圈居中，我试过很多方法，最好是用absolute，但我不能让它响应。

这是代码：

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

在您的代码中添加此 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/

Answer 3

DEMO

已添加：

top: 50%; 和 left: 50%; 使其相对于其父级显示：.main { position: relative
添加了 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

您可以将 positioning 与 calc css3 属性结合使用（摆脱那些低效和可怕的 float 元素） .

您可能也对使用 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>

在响应式网站的容器中将 div 置于四个 div 的中心

Centre div over four divs within container on responsive site

html

css

position