title: Center align a display:table-cell inside a td
body: <p>I'm creating an email template - using tables of course.</p>
  
  <p>I have a rounded <code>p</code> element inside a <code>td</code> , in order to vertical align it's content I used the <code>display: table-cell</code> property.</p>
  
  <p>The problem is that now the circle in not center aligned in the <code>td</code> any more even when using <code>margin: 0 auto</code></p>
  
  <p>see <a href="https://jsfiddle.net/gwmqrv8w/" rel="nofollow">jsfiddle</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td class="circle"&gt;
        &lt;p&gt;&lt;b&gt;12&lt;/b&gt;&lt;br/&gt;views&lt;/p&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>td {
     width: 140px;
  }
  
  table td.circle p {
     margin: 0 auto;
     height: 70px;
     width: 70px;
     background-color: rgb(92, 177, 251);
     border-radius: 50%;
     text-align: center;
     display: table-cell;
     vertical-align: middle;
  }
  </code></pre>
  
  <p>How can I center align the circle, without using extra positioning hacks that won't be supported in an email?</p>