Html 在响应现场集装箱内四个分区的中心分区

这是我的照片：

如何将黑圈居中，我已经尝试了很多方法，最好的方法是使用绝对法，但我无法使其响应

开始了

代码如下：

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>

正如我上面所说，我已经设法使用

LEFT，TOP

将其居中，但它没有响应。而且它也不是我所期望的50%

---

知道我做错了什么吗？

只需添加

左边距：-200px输入

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

这里是更新后的
只需添加
左边距：-200px输入

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

以下是更新后的
在代码中添加此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;
}

请参见演示
在代码中添加此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;
}

请参见演示

增加：

top:50%和
左侧：50%
使其相对于其父级显示：
.main{position:relative

添加了
transform:translate（-50%，-50%）
将其居中。将其居中于自己的中心点：D

增加：

top:50%；
和
left:50%；
使其相对于其父级显示：
。main{position:relative
添加了
transform:translate（-50%，-50%）
将其居中。将其居中于自己的中心点：D
您应该清理主容器中的浮子

要执行此操作，请将其添加到主元素：

    <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>

您应该清理主容器中的浮子

要执行此操作，请将其添加到主元素：

    <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>

您可以将
定位
与
calc
css3属性结合使用（去除那些低效和可怕的
float
元素）

您可能还对使用
vw
单位感兴趣，我曾使用该单位使圆圈响应屏幕宽度：


html，
身体{
保证金：0；
填充：0；
}
.包裹{
利润率：5vw；
高度：80vh；
宽度：90vw；
显示：内联块；
位置：相对位置；
}
.包裹部{
位置：绝对位置；
身高：50%；
宽度：50%；
}
.包裹，红色{
背景：番茄；
排名：0；
左：0；
}
.包裹，黄色{
背景：黄色；
排名：0；
左：50%；
}
.包装，绿色{
背景：石灰；
最高：50%；
左：0；
}
.包裹，蓝色{
背景：矢车菊蓝；
最高：50%；
左：50%；
}
.包裹，黑色{
背景：黑色；
高度：20vw；
宽度：20vw；
边界半径：50%；
顶部：-webkit计算（50%-10vw）；
顶部：计算值（50%-10vw）；
左：-webkit计算（50%-10vw）；
左：计算（50%-10vw）；
}
您可以将
定位
与
calc
css3属性结合使用（去除那些低效和可怕的
float
元素）

您可能还对使用
vw
单位感兴趣，我曾使用该单位使圆圈响应屏幕宽度：


html，
身体{
保证金：0；
填充：0；
}
.包裹{
利润率：5vw；
高度：80vh；
宽度：90vw；
显示：内联块；
位置：相对位置；
}
.包裹部{
位置：绝对位置；
身高：50%；
宽度：50%；
}
.包裹，红色{
背景：番茄；
排名：0；
左：0；
}
.包裹，黄色{
背景：黄色；
排名：0；
左：50%；
}
.包装，绿色{
背景：石灰；
最高：50%；
左：0；
}
.包裹，蓝色{
背景：矢车菊蓝；
最高：50%；
左：50%；
}
.包裹，黑色{
背景：黑色；
高度：20vw；
宽度：20vw；
边界半径：50%；
顶部：-webkit计算（50%-10vw）；
顶部：计算值（50%-10vw）；
左：-webkit计算（50%-10vw）；
左：计算（50%-10vw）；
}

圆圈应该水平和垂直居中吗？圆圈的宽度，应该是固定宽度吗？圆圈应该水平和垂直居中吗？圆圈的宽度，应该是固定宽度吗？这会使它居中，我将
top:50%
更改为
top:50px
，它会居中，但不会响应sive，圆圈大小保持不变？您已将宽度400px提供给中心div，响应将仅工作到400px。您需要根据媒体查询调整宽度和左边距这在最新的chrome中不是垂直居中的（可能是由于浮动元素）这使它居中，我将
top:50%
更改为
top:50px
，它居中，但它没有响应，圆的大小保持不变？您已将宽度400px提供给中心div，响应的将仅工作到400px。您需要根据媒体查询调整剩余的宽度和边距这不是centre在最新的chrome中垂直显示d（可能是由于浮动元素。）这不会按照OP的要求生成响应圆。这不会按照OP的要求生成响应圆。谢谢@jbutler483，我会补充一点，尽管圆周围的四个div不是高响应的，所以我将有一个剧本：）@AndrewWalker:我已将它们设置为vw（视图宽度单位）它们对宽度也有响应。但高度不会随着屏幕变小而改变。我认为响应意味着框的高度和宽度会减少？@AndrewWalker:要保持圆的“圆形”，你希望它取哪个值？它当前根据宽度而改变-如果需要高度，你可以改变圆s值转换为vh（查看高度测量值）。除非您只想“拉伸”圆，这意味着它将是一个椭圆形？否则，您必须选择响应的圆（高度或宽度）-开发者通常在“屏幕宽度调整”中指的是“响应”，而不是屏幕的高度对不起，圆圈是完美的，完全符合我的要求，但结果是，当在移动设备上时，尽管圆圈的行为与它应该的一样，但它周围的div、番茄、黄色、蓝色、绿色、宽度缩小，但不是ra