Vertically center a glyphicon over an img in a div

Question

I have a div that houses a glyphicon and an img. The image is a thumbnail for a video and I'd like to put the play icon centered vertically and horizontally on top of that thumbnail. The markup looks like this:

<div class="container">
    <div class="col-sm-12">
        <h2>{{video.title}}</h2>
        <p>{{video.description}}</p>
        <div class="video-thumbnail">  <--- ITEM OF INTEREST
            <i class="glyphicon glyphicon-play-circle"></i>
            <img ng-src="{{video.thumbnail}}" alt="{{video.title}}" class="img-thumbnail img-responsive center-block"/>
        </div>
    </div>
</div>

The less that I've applied, past Bootstrap, looks like this:

featured-video {
  .video-thumbnail {
    text-align: center;

    &>.glyphicon-play-circle {
      font-size: 500%;
    }
  }
}

The computed css for the video-thumbnail looks like this:

box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: source-sans-pro, sans-serif;
font-size: 14px;
height: 818.328125px;
line-height: 20px;
text-align: center;
width: 1110px;

The computed css for the glyphicon looks like this:

-webkit-font-smoothing: antialiased;
box-sizing: border-box;
color: rgb(255, 255, 255);
display: inline-block;
font-family: 'Glyphicons Halflings';
font-size: 70px;
font-style: normal;
font-weight: normal;
height: 70px;
line-height: 70px;
position: relative;
text-align: center;
top: 1px;
width: 70px;

The computed css for the img looks like this:

background-color: rgb(255, 255, 255);
border-bottom-color: rgb(221, 221, 221);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(221, 221, 221);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(221, 221, 221);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(221, 221, 221);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(255, 255, 255);
display: block;
font-family: source-sans-pro, sans-serif;
font-size: 14px;
height: 743.328125px;
line-height: 20px;
margin-left: 0px;
margin-right: 0px;
max-width: 100%;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
text-align: center;
transition-delay: 0s;
transition-duration: 0.2s;
transition-property: all;
transition-timing-function: ease-in-out;
vertical-align: middle;
width: 1110px;

NOTE

I do need this to work on mobile devices so I'm leery about applying an actual size to the thumbnail. The videos will be recorded in 720p but that really shouldn't matter because this is just a thumbnail.

What I've Tried

I have tried setting the vertical-align: middle on the video-thumbnail and glyphicon; together and exclusively.

I've tried setting the line-height: 100% on the video-thumbnail along with the vertical-align: middle and that didn't have any effect.

I've tried another number of random modifications that didn't have any effect but also weren't really as methodical as the aforementioned.

What am I doing wrong here?

Answer 1

Absolute positioning might be the ticket.

.video-thumbnail {
    position: relative;
}
.video-thumbnail .glyphicon {
    position: absolute;
    top: 50%;
    margin-top: -10px; /* half icon's height */
    left: 50%;
    margin-left: -10px; /* half icon's width */
    z-index: 999;
}

Demo

Answer 2

Take a look of CSS transform, it works well for centering an unknown size element.

Browser support IE9+

JSFIDDLE DEMO

.video-thumbnail {
    position: relative;
}
.glyphicon-play-circle {
    font-size: 500%;
    position: absolute;
    left: 50%; top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
}