center circle

How do I center the center circle?

HTML

<div class="parent">
<div class="container">


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

CSS

.parent {
    display: table;
    margin: 50px auto;
    background: lightgray;
    height: 50%;
    width: 50%;
}
.container {
    display: table;
    margin: 50px auto;
    background: lightgray;
    height: 50%;
    width: 50%;
}
.middle {
    vertical-align: middle;
    display: table-cell;
}
.circle {
    background-color: transparent;
    margin: auto;
    position: relative;
    border: solid 10px rgba(0,8,255,0.5);
    border-left: solid 10px rgba(0,8,255,0.0);
    border-radius:50%;
    width: 50px;
    height: 50px;
	animation:	fadeIn 1.5s ease-in;
				/*sizeIn .5s ease-out;
				rotate 5s linear infinite;*/
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5),
                0 2px 1px rgba(0,0,0,1.0),
                0 2px 1px rgba(0,0,0,1.0) inset;
}
.circle .circle {
    margin-top: 8px;
    width: 16px;
    height: 16px;
    border-left: solid 10px rgba(0,8,255,0.0);
}

.circle:hover	{animation-play-state: paused;}

@keyframes rotate
                {0%	{transform: rotate(360deg);}
                100%{transform: rotate(0deg);} }

@keyframes fadeIn{0% {opacity: 0;}
				100%{opacity: 1;} }

@keyframes sizeIn
				{0%	
				{border: solid 40px rgba(0,235,255,0.3);
				border-top: solid 40px transparent;
				border-bottom: solid 40px transparent;
				width: 80px;
				height: 80px;}
					
				100%
				{border: solid 20px rgba(0,235,255,0.3);
				border-top: solid 20px transparent;
				border-bottom: solid 20px transparent;
				width: 40px;
				height: 40px;} }