Placing div vertical middle with parent
<p>I want to place a child element vertically with the parent element</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;Jajal&lt;/title&gt;
 &lt;style type="text/css"&gt;
  #body {
   font-family: sans-serif, arial, 'Roboto';
  }
  #outer {
   width: 280px;
   background-color: white;
   height: 253px;
   background-color: #f0f0f0;
  }
  .imgbox {
   height: 174px;
   width: 270px;
   overflow: hidden;
   display: table;
   margin: 0 auto;
   background-color: black;
   text-align: center;
  }
  .img_content {
   max-height: 174px;
   max-width: 270px;
   margin: 0 auto; 
   vertical-align: middle;
   display: table-cell;
  }
  .titlebox {
   max-width: 270px;
   text-align: center;
  }
  .title {
   font-weight: 900;
   font-size: 14px;
  }
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="outer"&gt;
  &lt;div class="imgbox"&gt;
   &lt;img class="img_content" src="http://lorempixel.com/700/100" alt="coba"&gt;
  &lt;/div&gt;
  &lt;div class="titlebox"&gt;
   &lt;p class="title"&gt;Lorem ipsum Amet&lt;/p&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Why the img_content class doesn't place verticaly middle with imgbox class when the image is to width?</p>