响应式地将 50% 的圆圈对齐到矩形的底部中心？

Question

我有一个 div 填充了所有的宽度和高度，然后我有一个较小的圆圈，它需要在这个 div 的 bottom/center 上占一半, 紧随其后的一半。

一切正常，直到我得到更高的高度或尝试缩放它，然后圆将垂直移动而不再是 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% 的圆圈对齐到矩形的底部中心？

Responsively align 50% of a circle on the bottom-center of a rectangle?

html

css

responsive-design

responsiveness