title: How to make image centered and at the bottom in HTML
body: <p>This is Html page and I can't make the image <code>.loader</code> centered and at the bottom of <code>.please-wait</code>. How to make it centered and at the bottom?</p>
  
  <p><strong>HTML File</strong>
      </p>
  
  <pre><code>    &lt;div id="container"&gt;
          &lt;main id="main" class="welcome"&gt;
  
          &lt;/main&gt;
          &lt;aside id="aside-right"&gt;
              &lt;img alt="Welcome" src="../images/panel.png" /&gt;
              &lt;div class="please-wait"&gt;
                  &lt;h3&gt;Please Wait&lt;/h3&gt;
  
                      &lt;img class="loader" src="../images/loading.gif" alt="Loading"&gt;
  
              &lt;/div&gt;
          &lt;/aside&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS File</strong></p>
  
  <pre><code>  #container
    {
      /* border: 2px solid black; */
      width: 100.6%;
      margin: 5px;
      white-space: nowrap;
      overflow: hidden;
      position:relative;
    }
    #main
    {
      Position:absolute;
      /* border: 2px solid blue; */
      float: left;
      margin:  3px;
      width: 65%;
      display: block;
      top: 25%;
    }
    #main.welcome
    {
  
      test-align: center;
    }
    #main.welcome h2
    {
      width: 58%;
      margin: 0 auto;
      text-align: center;
      word-break: normal;
      word-wrap: break-word;
      white-space: pre-line;
      /* border: 2px solid red; */
    }
    #aside-right
    {
      position:relative;
      max-height:200px;
      height:200px;
      border: 2px solid green;
      float: right;
      width: 27%;
    }
    #aside-right img
    {
      position:relative;
      width:100%;
      float:right;
  
    }
    .please-wait
    {
      position:absolute;
      border:2px solid red;
      height: 100%;
      width: 100%;
    }
    .please-wait h3
    {
  
      position: relative;
      /* border:2px solid blue; */
      margin: 15px;
      top:30px;
      text-align: center;
    }
    .please-wait img
    {
      position: relative;
      margin: 15px;
      text-align: center;
      max-width: 20%;
      border:2px solid blue;
    }
  </code></pre>
  
  <p>Can you please help me to center it and make it at the bottom of <code>.please-wait</code></p>
  
  <p><a href="http://jsfiddle.net/WSFnX/2415/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Can you please help me to center it and make it at the bottom of <code>.please-wait</code></p>