title: Overlay text over an image and align ALL center using only css and/or HTML
body: <p>I've read through several posts regarding both overlaying text over an image, AND on centering. None of the answers work for my situation. Below is both the HTML and the CSS I'm using. Frankly - the only thing I've found that will work to center my image UNDER my text is to revert to using  tags! I'm frustrated to say the least.</p>
  
  <p>It "should" be really simple, but it's not!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#header
  {
      height: 140px;
      position: relative;
       /*background: url('http://i105.photobucket.com/albums/m229/ayliea/ColeensDA_Avatar_zps7d63fb7c.jpg');
     background-color: #E7D4DE; for testing background colors*/
      background-repeat: no-repeat;
      background-position: center top;
      font-family: Segoe Script, Lucida handwriting, brush script mt, 
      monotype cosira, Apple Chancery, comic Sans MS Italic;
      top: 10px;
  }
  }
  #header p
  {font-size: 1.25em; font-weight: normal;}
  #header .imgcenter
  {
      display: inline-block;
      margin-left: auto;
      margin-right: auto;
      
      z-index:100;
  }
  .topcenter
  {
      position: absolute;
      top: -20px;
      text-align: center;
      width: 100%;
      font-weight: bold;
      color: #0200a1;
      font-size: 1.5em;
      text-decoration: none;
  } 
  .topmiddle
  {
      position: absolute;
      top:3.5em;
      text-align: center;
      width: 100%;
      padding: 4px;
      color: #c0c0c0;
      font-weight: bold;
      line-height:1.1em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
           &lt;img class="imgcenter" src="http://i105.photobucket.com/albums/m229/ayliea/ColeensDA_Avatar_zps7d63fb7c.jpg" alt="Aylissa"  /&gt;
       &lt;div class="topcenter"&gt;
       &lt;p&gt;&lt;a href="default.aspx"&gt;Testing My text overlay with&lt;br /&gt;trademark symbol and link&lt;sup&gt;&amp;#174;&lt;/sup&gt;&lt;/a&gt;&lt;/p&gt;
       &lt;/div&gt;
       &lt;p class="topmiddle"&gt;Second line of text that&lt;br /&gt;
       needs centered on top of image&lt;/p&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But unless I use the old-fashioned  tag, I just can't seem to get the darn image to both center AND either show (sometimes it disappears!) or have the text overlay it correctly!</p>
  
  <p>Can anyone help me with this issue?</p>
  
  <p>P.S. I used the suggestions from here: <a href="http://www.the-art-of-web.com/css/textoverimage/" rel="nofollow">http://www.the-art-of-web.com/css/textoverimage/</a> to do the overlay.</p>
  
  <p>Thanks for any help.</p>