title: How do I center an anchor element both vertically and horizontally in a floating div?
body: <p>I know that this has been asked a thousand times before and I apologise for asking again, but I haven't been able to figure this out after a few minutes of searching.</p>
  
  <p>I am trying to centre an anchor element within a <code>div</code> element both horizontally and vertically. The basis for this question is as follow.</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;
      &lt;a href=""&gt;Hello&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;div&gt;&lt;/div&gt;
  
  div {
      width: 100px;
      height: 100px;
      background-color: teal;
      box-sizing: border-box;
      margin: 10px;
      float: left;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
  }
  
  a {
      color: white;
      text-decoration: none;
      font-style: 14px;
  }
  </code></pre>
  
  <p>Now, I know that I can use <code>text-align: center;</code> on the containing <code>div</code> to centre the anchor element horizontally and that I can use <code>display: table-cell; vertical-align: middle;</code> on the <code>div</code> to align it vertically but it doesn't seem to work together, especially when the <code>div</code> is set to float left.</p>
  
  <p>How can I achieve this rather simple layout? Also, please elaborate on why what I'm trying doesn't work as I'd like to learn rather than just fix this.</p>
  
  <p>I would prefer not to use <code>line-height</code> since it breaks with multi-line text.</p>
  
  <p><a href="http://jsfiddle.net/xHLze/2/" rel="nofollow">http://jsfiddle.net/xHLze/2/</a></p>