如何将div相对于父div垂直居中对齐

Question

How do I vertically align a div with respect to the parent div ?

<div class="col-xs-12 pr30 parentdiv">
    <div class="image-content col-xs-9 col-md-5 pull-right pl0 pr0 ml0" style="margin-right:6% !important;">
         <div class="pull-left">
            <a href="productbanner.html">
                <img height="100%" width="100%" alt="Liberty Global logo" src="productbanner.JPG" class="img-responsive pull-left">
            </a>

         </div>
    </div>
    <div class="text-content col-xs-12 col-md-6 pull-left">
    <div>
         <div class="heading-content">
               <span class="textDecreaseCaption">
                   <a href="productbanner.html">Product Banner</a>
               </span>
         </div>
         <div class="smallspace"></div>
         <div class="description-content textDecrease">                     
              Product details banner with image component
         </div>
   </div>
 </div>

This is the HTML I have included. The parent div takes the size of the image-content. I want the div "text-content" to be aligned to the center of the parent div, that is to the center of the image-content div .

I tried this logic

.parentdiv {
     display: table;
}

 .text-content {
    display: table-cell;
    vertical-align: middle;
 }

There's no change in the vertical alignment in this case. Please provide me a solution for this issue.

Answer 1

Seems to work as it, maybe another css is applied. See http://codepen.io/adrienmar/pen/PNWYMw

.parentdiv {
  display: table;
}

.text-content {
  display: table-cell;
  vertical-align: middle;
}

Answer 2

Try this

.parentdiv {
  position:relative;
 }

.text-content {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
}