center circle

How do I center the center circle?

HTML

<div class="parent">
    <div class="middle">
        <div class="circle">
            <div class="circle"></div>
        </div>
    </div>
        <div class="middle">
        <div class="circle">
            <div class="circle"></div>
        </div>
    </div>
</div>

CSS

.parent{
    display: table; 
    margin: 50px auto;
    /* background: lightgray; */
    height: 100px;
    width: 100px;
}

.middle {
    vertical-align: middle;
    text-align:center;
    display:table-cell;
    padding:20%;
}

.circle
 {
    margin: 2px;
    position:relative;
    border: solid 10px blue;
    border-radius:50%;
    opacity: 0.3;
    width: 50px;
    height: 50px;
}
.circle .circle
{
    margin:8px 3px 0px 8px;
    width:15px;
    height:15px;
    border-radius:50%;
}