如何对齐div底部的圆圈50％的圆圈位于div内部，50％位于div外部

Question

.icon { 
    position: relative; 
    text-align: center; 
    background: #00CFEF; 
    width: 120px; 
    height: 120px; 
    font-size: 50px; 
    color: #fff; 
    border-radius: 60%; 
    -ms-transform: translate(0%, 42%); 
    -webkit-transform: translate(0%, 42%); 
    -moz-transform: translate(0%, 42%); 
    -o-transform: translate(0%, 42%); 
} 

问题是，变换CSS并未在所有浏览器中对齐圆圈。

Answer 1

translate根本不需要这样做。您可以使用position: absolute和calc()：

.container{ 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: royalblue; 
 
} 
 

 
.circle{ 
 
    position: absolute; 
 
    top: calc(100% - 25px); 
 
    left: calc(50% - 25px); 
 

 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    
 
    background-color: orangered; 
 
}

<div class="container"> 
 
    <div class="circle"></div> 
 
</div>

但你不应该试图使它在所有的浏览器，只是在现代浏览器。如果我们继续在应用程序中支持旧浏览器，人们永远不会觉得需要升级到新的浏览器。