響應性地將50％的圓對齊到矩形的底部中心？

Question

我有一個div填充了所有寬度和高度，然后有一個較小的圓，它需要在該div的底部/中心一半，緊隨其后。

一切工作，直到我獲得更高的高度或嘗試對其進行縮放，然后圓圈將垂直移動，不再是50/50。 同樣，縮放頁面會使圓圈從頂部而不是中間擴展。

jsFiddle

    <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元素創建了一個圓，而不是您提供的圖像（可以將其刪除）。