Align nested div in center vertically & horizontally
<p>I am using slick slider to latest news items. i have to show parent container with overlay and title of the new aligned in middle/center vertically &amp; horizontally. I tried to use flex css but that did not work.</p>

<p><a href="http://codepen.io/anon/pen/ZBZBYQ" rel="nofollow noreferrer">http://codepen.io/anon/pen/ZBZBYQ</a></p>

<pre><code>&lt;section class="regular slider "&gt;
  &lt;div class="tb-parent"&gt;
    &lt;img src="https://placeholdit.imgix.net/~text?txtsize=56&amp;bg=ff0000&amp;txtclr=000000&amp;txt=600%C3%97400&amp;w=600&amp;h=400"&gt;
    &lt;div class="tb-child"&gt;Project One Title &lt;br&gt; Project One Title&lt;/div&gt;
  &lt;/div&gt;

  &lt;div&gt;
    &lt;img src="http://placehold.it/600x400?text=2&amp;bg=fff000&amp;text=2"&gt;
    &lt;div&gt;Project TWO Title &lt;br&gt; Project One Title&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;img src="http://placehold.it/600x400?text=2&amp;bg=fff000&amp;text=3"&gt;
    &lt;div&gt;Project THREE Title &lt;br&gt; Project One Title&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;img src="http://placehold.it/600x400?text=2&amp;bg=fff000&amp;text=4"&gt;
    &lt;div&gt;Project FOUR Title &lt;br&gt; Project One Title&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;img src="http://placehold.it/600x400?text=2&amp;bg=fff000&amp;text=5"&gt;
    &lt;div&gt;Project FIVE Title &lt;br&gt; Project One Title&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;img src="http://placehold.it/600x400?text=2&amp;bg=fff000&amp;text=6"&gt;
    &lt;div&gt;Project SIX Title &lt;br&gt; Project One Title&lt;/div&gt;
  &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>Not sure where i am doing wrong. I tried to use display type as table/table-cell also</p>