title: Center play button vertically and horizontally in div
body: <p>I have this <a href="http://jsfiddle.net/k2n4896u/2/" rel="nofollow"><strong>jsfiddle demo</strong></a>. </p>
  
  <p>I have an thumbnail of a vimeo movie (here it is a placeholder) in the center I would like a play btn.</p>
  
  <p>The whole of the image will be clickable so the play button is just for illustration.</p>
  
  <p>I would like the play button dead center.</p>
  
  <p>I can do it with negative margins but I won't really know the size of the play button.</p>
  
  <p>How can I dead center the play button with knowing it dimensions.</p>
  
  <pre><code>.video_thumbnail {
    border: 1px solid red;
    position: relative;
  }
  
  .video_thumbnail:hover {
    cursor: pointer;
  }
  
  .video_thumbnail .play-btn {
    background: white;
    background: blue;
    display: inline-block;
    padding: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    /*
              margin-left: -35px;
              margin-top: -35px;
              */
  }
  
  .video_thumbnail .play-btn:after {
    content: "";
    display: block;
    position: relative;
    left: 2px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent white;
  }
  </code></pre>