title: div with text, overlay and image
body: <p>I want to align the text in the middle (Horizontal &amp; Vertical) of each single box: </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="piclist"&gt;&lt;a href="#" class="tag1"&gt;&lt;span&gt;Tag 1&lt;/span&gt;&lt;div class="overlay"&gt;&lt;/div&gt;&lt;div class="tabpic foto1" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png); display: block;"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
         &lt;div class="piclist"&gt;&lt;a href="#" class="tag2"&gt;&lt;span&gt;Tag 2&lt;/span&gt;&lt;div class="overlay"&gt;&lt;/div&gt;&lt;div class="tabpic foto2" style="background-image: url(https://cdn.downdetector.com/static/uploads/c/300/5f7e7/wikipedia-logo_1_1.png); display: block;"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
         &lt;div class="piclist"&gt;&lt;a href="#" class="tag3"&gt;&lt;span&gt;Tag 3&lt;/span&gt;&lt;div class="overlay"&gt;&lt;/div&gt;&lt;div class="tabpic foto3" style="background-image: url(https://cdn.downdetector.com/static/uploads/c/300/5f7e7/wikipedia-logo_1_1.png); display: block;"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
         &lt;div class="piclist"&gt;&lt;a href="#" class="tag4"&gt;&lt;span&gt;Tag 4&lt;/span&gt;&lt;div class="overlay"&gt;&lt;/div&gt;&lt;div class="tabpic foto4" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png); display: block;"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I think there is a problem with the nested divs: <a href="https://jsfiddle.net/brL822vb/" rel="nofollow noreferrer">https://jsfiddle.net/brL822vb/</a></p>
  
  <p><a href="https://i.stack.imgur.com/HcTRK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HcTRK.png" alt="enter image description here"></a></p>