如何在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>

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