title: How to exactly center rendered text inside a Border
body: <p>I have a <code>Border</code> with a <code>Content</code> of <code>TextBlock</code> that I want to be perfectly centered both horizontally and vertically.  No matter what I try it never looks centered. What am I missing?</p>
  
  <p>Using the code below the top of the text is 19px below the border, the bottom of the text is 5px above the border. It's also off center left or right depending on the <code>Text</code> value which I assume is related to the font.</p>
  
  <p>The solution should work for varying text (1-31) with any font.</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>&lt;Grid Width="50" Height="50"&gt;
      &lt;Border BorderThickness="1" BorderBrush="Black"&gt;
          &lt;TextBlock Text="13" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="50"/&gt;
      &lt;/Border&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>Result</strong></p>
  
  <p><img src="https://i.stack.imgur.com/LBv2r.png" alt="enter image description here"><img src="https://i.stack.imgur.com/rRa8o.png" alt="enter image description here"></p>