center circle

How do I center the center circle?

by D7460N

HTML

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

CSS

.parent{
    display: table; 
    margin: 50px auto;
    background: lightgray;
    height: 190px;
    width: 290px;
}

.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;
    margin: auto;
}
.circle .circle
{
    margin:8px 3px 0px 8px;
    width:15px;
    height:15px;
}