How can I get my image to be vertically aligned in the center with respect to a dynamic div on it's left?
<p>So i have a bootstrap row with text content on the left in a div spanning 4 cols and my image on the right in another div spanning 8 cols. Now, in the tablet based view i need my image to be in the exact center of it's container with respect to the text on it's left(New text may be added so the center alignment of the image with respect to the text should be dynamic)</p>

<pre><code>HTML:
&lt;div class="row"&gt;
      &lt;div class="col-sm-8 col-sm-push-4 tab_image"&gt;
            &lt;img src="images/event/event-banner-v3.jpg" alt=""&gt;

      &lt;/div&gt;      
        &lt;div class="col-sm-4 col-sm-pull-8 col-xs-12"&gt;
           &lt;p&gt;This year's Bank of Scotland Great Scottish Run, will see thousands of runners to the streets of Glasgow on Sunday 4 October.&lt;br&gt;&lt;Br&gt;Join us at the biggest running event in Scotland and soak up the atmosphere provided by thousands supporters lining the streets, music and bands on the run, charity cheering points..&lt;/p&gt;        
        &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>For CSS: What I've done now is hard coded a value to ensure it is centering to the text w.r.t the p tag above but when i add new Lorem Ipsum text it's not centered. What i need is dynamic centering of the image as and when text in the p tag changes.</p>

<p>CSS:</p>

<pre><code>@media (min-width: 768px) and (max-width: 991px){
    .tab_image {
        position: relative;
        transform: translateX(17%);
        transform: translateY(17%);
    }
</code></pre>