Text over Row of Images - Responsive - html

Question

I have this example:
.gg-slides {height: auto; overflow: hidden}
.gg-con {margin: 75px 0 80px; display: flex}
.gg-icon {background: rgba(0,0,0,.6); border-radius: 99px; color: #333;
cursor: pointer; height: 126px; left: 50%; position: absolute; text-align: center; top: 50%; transition: all .5s ease; width: 126px; z-index: 3;}
<div class="gg-slides">
<div class="gg-con">
<span class="gg-slide"><img src="http://placehold.it/200x200" alt=""></span>
<span class="gg-slide"><img src="http://placehold.it/200x200" alt="">
<div class="gg-icon">
<div class="gg-count">
<span class="gg-total">10</span>
</div>
</div>
</span>
<span class="gg-slide"><img src="http://placehold.it/200x200" alt=""></span>
</div>
</div>
Essentially I'd like for the .gg-icon to appear horizontally and vertically in the middle of the 2nd image for all screen resolutions. I'm having trouble figuring this out with my current HTML structure.

Answer 1

You can do it with the positioning:
.gg-slides {height: auto; overflow: hidden}
.gg-con {margin: 75px 0 80px; display: flex}
.gg-icon {
background: rgba(0,0,0,.6);
border-radius: 50%;
color: #333;
cursor: pointer;
height: 126px;
/*left: 50%;*/
/*position: absolute;*/
text-align: center;
/*top: 50%;*/
transition: all .5s ease;
width: 126px;
z-index: 3;
}
/* added */
.gg-slide {
position: relative;
}
.gg-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="gg-slides">
<div class="gg-con">
<span class="gg-slide"><img src="http://placehold.it/200x200" alt="">
</span>
<span class="gg-slide"><img src="http://placehold.it/200x200" alt="">
<div class="gg-icon">
<div class="gg-count">
<span class="gg-total">10</span>
</div>
</div>
</span>
<span class="gg-slide"><img src="http://placehold.it/200x200" alt=""></span>
</div>
</div>

Answer 2

Another way to reach this: https://jsfiddle.net/0yjwLras/43/
I just removed the central image and put there a new div, which has the central div under it, and background-image
<div class="gg-slides">
<div class="gg-con">
<span class="gg-slide"><img src="http://avatarbox.net/avatars/img28/kitten_eyes_avatar_picture_75535.jpg" /></span>
<span class="gg-slide"><div class="BUBU"><div class="gg-icon CENTRAL-BUBU"><div class="gg-count"><span class="gg-total">10</span></div></div></div></span>
<span class="gg-slide"><img src="http://avatarbox.net/avatars/img28/kitten_eyes_avatar_picture_75535.jpg" /></span>
</div>
</div>
CSS
.gg-slides {height: auto;overflow: hidden;}
.gg-con {margin:75px 0 80px;display:flex;}
.gg-icon {background-color: rgba(255,0,0,.6);border-radius: 50%;color: #333; cursor: pointer; width: 50px; height: 50px;text-align: center;transition: all .5s ease;z-index: 3;}
.BUBU {width: 100px; height: 100px; background-image: url('http://avatarbox.net/avatars/img28/kitten_eyes_avatar_picture_75535.jpg'); background-repeat: no-repeat; padding-top: 25px;}
.CENTRAL-BUBU {margin-left: auto; margin-right: auto;}