title: Why won't the image align vertical / center in these containers?
body: <p>I have seen similar questions and this began by using the answer provided:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wraptocenter {
    float: left;
    position: relative;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    background-color: yellow;
    border: solid black 1px;
  }
  
  .wraptocenter * {
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wraptocenter"&gt;&lt;img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /&gt;&lt;/div&gt;
  &lt;div class="wraptocenter"&gt;&lt;img src="https://img.xcitefun.net/users/2015/01/382650,xcitefun-philippines-tour-1.jpg" /&gt;&lt;/div&gt;
  &lt;div class="wraptocenter"&gt;&lt;img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /&gt;&lt;/div&gt;
  &lt;div class="wraptocenter"&gt;&lt;img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /&gt;&lt;/div&gt;
  &lt;div class="wraptocenter"&gt;&lt;img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /&gt;&lt;/div&gt;
  &lt;div class="wraptocenter"&gt;&lt;img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /&gt;&lt;/div&gt;
  &lt;div class="wraptocenter"&gt;&lt;img src="http://www.brunildo.org/thumb/tmiri2_o.jpg" /&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It doesn't work as I want. I want my <code>wraptocenter</code> div  containers to float one after he other and go down to the next row. If I remove <code>float</code> then they center but all of then squish on one row. When I add <code>float</code> the image is no longer centered vertically.</p>
  <p>In the final HTMl I will want to use various images of different dimensions, all of which should be central.</p>
  <p>I don't want to use any special elements (like flex grids). Just basic html / css.
  <a href="https://i.stack.imgur.com/IcmCQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IcmCQ.png" alt="enter image description here" /></a></p>