Css 如何在div底部对齐圆50%的圆在div内，50%的圆在div外

问题是transform CSS并没有在所有浏览器中对齐圆圈。

translate

根本不需要实现这一点。您可以使用

position:absolute

和

calc（）

：

.container{
位置：相对位置；
高度：100px；
宽度：100px；
背景颜色：皇家蓝；
}
.圆圈{
位置：绝对位置；
顶部：计算（100%-25px）；
左：计算（50%-25px）；
宽度：50px；
高度：50px；
边界半径：50%；
背景颜色：橙色；
}

.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%);
}