title: Center div horizontally and vertically inside another div
body: <p>I have a question regarding centering an element horizontally and vertically inside of another div. </p>
  
  <p>I am working on a website for a client, and here is the page that is giving me trouble: <a href="http://staging.slackrmedia.com/halfpast/brand_collection_bremont.html" rel="nofollow">http://staging.slackrmedia.com/halfpast/brand_collection_bremont.html</a></p>
  
  <p>So when you hover over an image, you see a link that says "View Collection". I'm styling this using CSS3 transitions and opacity, but I'm having one issue: I need this "View Collection" link to center horizontally and vertically inside of the div in which it sits. </p>
  
  <p>Here is a link to the jsFiddle with my code: <a href="http://jsfiddle.net/T2n5b/4/" rel="nofollow">http://jsfiddle.net/T2n5b/4/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h2&gt;Bremont Collections&lt;/h2&gt;
  
  &lt;div class="row text-center uppercase"&gt;
      &lt;div class="col-1-3"&gt;
          &lt;img src="http://staging.slackrmedia.com/halfpast/images/watches/alt1-p.png" alt="ALT1-P Pilot" /&gt;  &lt;a href="" class="btn small"&gt;View Collection&lt;/a&gt;
          &lt;a href=""&gt;ALT1-P Pilot&lt;/a&gt;
      &lt;/div&gt;&lt;!-- .col-1-3 --&gt;
  
      &lt;div class="col-1-3"&gt;
          &lt;img src="http://staging.slackrmedia.com/halfpast/images/watches/solo-37.png" alt="Supermarine" /&gt;  &lt;a href="" class="btn small"&gt;View Collection&lt;/a&gt;
      &lt;a href=""&gt;Solo-37&lt;/a&gt;
  
      &lt;/div&gt;&lt;!-- .col-1-3 --&gt;
  
      &lt;div class="col-1-3"&gt;
          &lt;img src="http://staging.slackrmedia.com/halfpast/images/watches/bc-f1.png" alt="BC-F1" /&gt;  &lt;a href="" class="btn small"&gt;View Collection&lt;/a&gt;
          &lt;a href=""&gt;BC-F1&lt;/a&gt;
      &lt;/div&gt;&lt;!-- .col-1-3 --&gt;
  &lt;/div&gt;&lt;!-- .row --&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* Buttons
     ============================= */
   .btn {
      background: #c60202;
      border-bottom: 1 px solid rgba(0, 0, 0, 0.1);
      border: 0;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 1em;
      height: 45px;
      line-height: 2.9;
      margin: 0px;
      padding: 0 40px;
      position: relative;
      text-align: center;
      text-decoration: none;
      vertical-align: bottom;
      width: auto;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all .2s ease;
      -moz-transition: all .2s ease;
      -ms-transition: all .2s ease;
      -o-transition: all .2s ease;
      transition: all .2s ease;
  }
  .btn:hover {
      background: #d31d1c;
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05)));
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
      background-repeat: repeat-x;
  }
  .btn.small {
      font-size: 0.9em;
      line-height: 2.4;
      height: 35px;
      padding: 0 15px;
  }
  a.btn {
      color: #fff;
      text-decoration: none;
  }
  /*
   * Type Styles
   */
   .text-center {
      text-align: center;
  }
  .uppercase {
      text-transform: uppercase;
  }
  /* Grid
     ============================= */
   *, *:after, *:before {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
  }
  .row {
      margin-left: -20px;
  }
  .row:after {
      clear: both;
      content:"";
      display: table;
  }
  /*
   * Grid Gutters
   */
  [class*='col-'] {
      float: left;
      padding-left: 20px;
  }
  .row-pad {
      padding: 20px 0 20px 20px;
  }
  .row-pad[class*='col-']:last-of-type {
      padding-right: 20px;
  }
  /* 
   * Grid Columns
   */
   .col-1-3 {
      width: 300px;
  }
  /*
   * Button Hover
   */
   .row .col-1-3 img {
      display: block;
      width: 163px;
      height: 276px;
      margin: 0 auto 10px;
  }
  .row .col-1-3 a.btn.small {
      font-size: 0.75em;
      margin: -165px 0 0 -80px;
      opacity: 0;
      position: absolute;
  }
  .row .col-1-3 a.btn.small:hover {
      opacity: 1;
  }
  </code></pre>
  
  <p>Any solution with HTML, CSS, or jQuery is perfectly fine. I think there might just be a small issue with my HTML and CSS that I'm currently using, but I just can't figure it out. </p>