title: Center align image vertically & horizontally on a web page
body: <p>I need to display simple under contruction page which has an image let us say 800x700px &amp; i want this image to appear at the center of page both vertically &amp; horizontally,</p>
  
  <p>I tried different approach's but didn't work. Sample html below</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  
  html, body { height: 100%; width: 100%; }
  body { position: relative;  background-image:url('images/bg.jpg');background-repeat:repeat; }
  #mydiv { 
      position: absolute;
      height: 100%;
      width: 100%;
      text-align:ceter;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>