title: How do I center a column of images vertically, responsively for mobile devices
body: <p>I'm coding up an app that displays 9 newest photos having certain tag. I solved the problem of different image sizes by setting every picture's size to 240px wide and 200px tall. </p>
  
  <p>My question is how do I center them vertically so they are in the middle of screens width? I want them to be responsive, so they are always in the middle, no matter the width of the device displaying them.</p>
  
  <p>HTML:-</p>
  
  <pre><code>&lt;div id="results" class="row"&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>So far I've tried pretty much everything I could find on the internet. I should mark, that there are 9 photos being displayed, so user will have to scroll. That means that every solution containing position: absolute; won't do it. </p>
  
  <p>Photos are being picked through Flickr API. After that, I .append() them to div#results by doing:-</p>
  
  <pre><code>$("#results").append('&lt;div class="miniaturka col-xs-12 col-sm-4 col-md-4 col-lg-4"&gt;&lt;a href="'+myresult_size.url+'" target="_blank"&gt;&lt;img src="'+myresult_size.source+'" &gt;&lt;/a&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>Bootstraps grid fails to center them.</p>