如何在CSS中创建此形状？(垂直对齐div)

我如何在CSS中创建它？我无法对齐圆形div垂直中间.

见图:

在这里我做了什么:https://jsfiddle.net/5odbwkn5/

 .gray-btn1 {
     width: 50px;
     height: 50px;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     background: url(../images/ico/9.png) no-repeat center 70%;
     background-color: #5dd6e4;
     margin-left:-20px;
     position: relative;
     float:left;
 }
 .gray-btn {
     width: 50px;
     height: 50px;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     background: url(../images/ico/9.png) no-repeat center 70%;
     background-color: #5dd6e4;
     margin-right: -20px;
     position: relative;
     float:right;
 }
 .gray-mid {
     background-color: #5dd6e4;
     text-align:center;
 }

    
left
    
    
right
    
    
middle

.container:before {
    content:' ';
    display:block;
    height: 30px;
    width:30px;
    background-color:#999;
    border-radius:15px;
    position:absolute;
    left:-15px;
    top:7px;
}
.container:after {
    content:' ';
    display:block;
    height: 30px;
    width:30px;
    background-color:#999;
    border-radius:15px;
    position:absolute;
    right:-15px;
    top:7px;
}