css - 如何对齐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%);
}

问题是 transform 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>

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