title: Can someone tell me the trick to centering an image that needs to start out display:none?
body: <p>I started with this simple question and as I wrote everything below I realized the solution. If you Google "how to center an image" this is actually a common issue. While most people know how to, maybe someone, like me, will come across the issue I had below and this will be of help to them. I didn't want this well thought out post go to waste!</p>
  
  <hr>
  
  <p>So there are two ways known to me how to center an image:</p>
  
  <p>1) Apply CSS: <code>display:block;</code> and <code>margin:0 auto</code> to it.</p>
  
  <p>2) Wrap it in a <code>div</code> with a specific width(the width of the image) and apply CSS: <code>margin: 0 auto;</code></p>
  
  <p>My preferred method is the first one, if you're going to have more than one image that needs this applied to it, whether they are on different parts of the page or being swapped out, you don't want to have to specify the size since image sizes vary.</p>
  
  <p>But now what if I need one or more of the images to start out hidden? More specifically with the CSS: <code>display:none;</code> as this does not take up space.</p>
  
  <p>Ok so here is a <a href="https://jsfiddle.net/9chtcaje/2/" rel="nofollow">JSFIDDLE</a> that uses the first method. Since the image is now being given the <code>display:block</code> style, it is no long <code>display:none</code>. Obviously.
  <strong>I am aware that I can simply remove <code>#wrap</code> from the stylesheet and all my problems will seemingly be solved</strong>. But I need to call specific images, not all.</p>
  
  <p><a href="https://jsfiddle.net/9chtcaje/3/" rel="nofollow">This</a> JSFIDDLE shows the second method. Simply showing how this method does not work, as if an image is a different size it no longer is centered.</p>