title: Placing div vertical middle with parent
body: <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>