.circle-wrapper{position:relative;width:400px;height:400px;margin:60px auto;border-radius:50%;} .circle-center{position:absolute;top:50%;left:50%;width:140px;height:140px;background:#0a0a0a;color:#fff;border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;} .circle-item{position:absolute;width:120px;height:120px;background:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:10px;} .item-1{top:0;left:50%;transform:translate(-50%,-50%);}.item-2{top:50%;right:0;transform:translate(50%,-50%);}.item-3{bottom:0;left:50%;transform:translate(-50%,50%);}.item-4{top:50%;left:0;transform:translate(-50%,-50%);}