title: How to keep an image centered and responsive?
body: <p>I have an image, centered both, horizontally and vertically</p>
  
  <pre><code>#logo01{
      position:absolute;
      top:50%;
      left:50%;
      margin-top:-146px;  // half of height
      margin-left:-229px;  // half of width
      cursor:pointer;
  }
  </code></pre>
  
  <p>Now I need a responsive design, so:</p>
  
  <pre><code>#logo01{
      max-width:45%;
      max-height:45%;
  }
  </code></pre>
  
  <p>It works, but position is lost. How can I keep the image centered and responsive at the same time ?</p>