Question

我有一个div填充所有的宽度和高度的数量，然后我有一个较小的圆，需要在这个div的底部/中心的一半，在它之后的一半。

一切正常，直到我有更高的高度或尝试放大它，然后圆圈将垂直移动，不再是50/50。此外，缩放页面将使圆圈从顶部扩展，而不是从中间扩展。

    <div id="rectangle">
        <img id="circle" src="http://alloutput.com/wp-content/uploads/2013/11/black-circle-mask-to-fill-compass-outline.png">
    </div>

的CSS：

body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92%;
    background: #E5E5E5;
}
#circle {
    position: absolute;
    top: 86%;
    left: 0;
    right: 0;
    width: 100px;
    margin-right: auto;
    margin-left: auto;
}

Answer 1

由于圆形在矩形内部，因此其位置相对于矩形。这意味着您需要将圆bottom属性设置为圆半径的一半：

body {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
#rectangle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 92%;
    background: #E5E5E5;
}
#circle {
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    width: 100px;
    height: 100px;
    margin-right: auto;
    margin-left: auto;
    background: none #000;
    border-radius: 50%;
}

<div id="rectangle">
    <div id="circle"></div>
</div>

我使用html元素创建一个圆而不是你提供的图像（你可以删除它）。

在矩形的底部中心响应地对齐50％的圆圈？

1 个答案: