title: How to center text horizontally & vertically within dotted border
body: <p>I need to center some text between a dotted border vertically and horizontally as in below image : </p>
  
  <p><img src="https://i.stack.imgur.com/tGgsw.png" alt="enter image description here"></p>
  
  <p>I have a <a href="http://jsfiddle.net/eCUv9/2/" rel="nofollow noreferrer">very simple fiddle</a> which attempts to achieve this.</p>
  
  <p>How can the css be amended to appear as attached screenshot ?</p>