Bootstrap content not centering vertically when stacked

Question

I am using vertical-align: middle to center my content as shown below.

It works great when both halves are side by side, but when my columns are stacked when in mobile view, the content no longer stays centered in the middle. It looks like this when stacked.

I want the content to stayed centered vertically whether you're viewing it on a desktop or mobile. For whatever reason vertical-align: middle isn't working when my columns stack. Is there anything I can add to my css to fix this?

HTML:

<!-- Families -->
<div id="families">
<div class="container-fluid">
    <div class="row text-center center-row">

        <div class="col-md-6 col-md-push-6 fam-col-left">
            <h2>Families & Individuals</h2>
            <br>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus earum dolorum sapiente quod, voluptas optio, ducimus nemo rerum commodi porro laudantium nam. Veritatis ex enim culpa voluptatem, corporis? Distinctio, obcaecati.</p>
        </div>

        <div class="col-md-6 col-md-pull-6 fam-col-right">
            <ul class="list-unstyled">
             <li><i class="fa fa-map-o fa-fw fa-1x"></i><a href="#"> Wealth Management</a></li>
             <li><i class="fa fa-pie-chart fa-fw fa-1x"></i><a href="#"> Asset Allocation</a></li>
             <li><i class="fa fa-anchor  fa-fw fa-1x"></i><a href="#"> Insurance Risk Assessments</a></li>
             <li><i class="fa fa-graduation-cap fa-fw fa-1x"></i><a href="#"> Education Funds Planning</a></li>
             <li><i class="fa fa-calendar-check-o fa-fw fa-1x"></i><a href="#"> Retirement Planning</a></li>
             <li><i class="fa fa-area-chart fa-fw fa-1x"></i><a href="#"> Investments</a></li>
            </ul>
            <a class="btn btn-primary" href="#" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
        </div>

    </div> <!-- end row -->
</div> <!-- end container-fluid -->
</div> <!-- end families -->

CSS:

.center-row {
    display: table;
    }

    #families {
    margin-bottom: -30px;
    }

    .fam-col-left {
    background: url('../img/spark.jpg');
    background-position: 50% 50%;
    background-repeat: no-repeat;

    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    height: 550px;
    color: #FCFFF5; /*white*/

    display: table-cell;
    vertical-align: middle;
    float: none;
    }

    .fam-col-left p {
    font-size: 16px;
    width: 50%;
    margin: 0 auto;
    }

    .fam-col-right {
    display: table-cell;
    vertical-align: middle;
    float: none;
    }

    .fam-col-right li {
    padding-bottom: 20px;
    font-size: 16px;
    }

    @media (max-width:768px) {
    .center-row {
    display: block;
    }
    .fam-col-right, .fam-col-left {
    width:100%;    
    display:inline-block;
    }
    }

Answer 1

Trying to vertically center a block element using vertical-align: middle is not completely effective, since that's not the intended job for vertical-align. It's intended to be used on inline elements, like a <span>. For a block level element (like <div> or <p>), there are better alignment tools.

Here's some stripped-down code showing one simple technique that will vertically align a block element inside another block element:

CSS:

.valign-wrapper {
  position: relative;
  text-align: center;
  height: 550px;
}

.valign-middle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

HTML:

<div class="valign-wrapper">

  <img src="http://lorempixel.com/image_output/city-q-g-764-550-6.jpg">

  <div class="valign-middle">

    <h2>Families &amp; Individuals</h2>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus earum dolorum
    sapiente quod, voluptas optio, ducimus nemo rerum commodi porro laudantium nam.
    Veritatis ex enim culpa voluptatem, corporis? Distinctio, obcaecati.</p>
    <ul class="list-unstyled">
      <li><i class="fa fa-map-o fa-fw fa-1x"></i><a href="#"> Wealth Management</a></li>
      <li><i class="fa fa-pie-chart fa-fw fa-1x"></i><a href="#"> Asset Allocation</a></li>
      <li><i class="fa fa-anchor  fa-fw fa-1x"></i><a href="#"> Insurance Risk Assessments</a></li>
      <li><i class="fa fa-graduation-cap fa-fw fa-1x"></i><a href="#"> Education Funds Planning</a></li>
      <li><i class="fa fa-calendar-check-o fa-fw fa-1x"></i><a href="#"> Retirement Planning</a></li>
      <li><i class="fa fa-area-chart fa-fw fa-1x"></i><a href="#"> Investments</a></li>
    </ul>
    <a class="btn btn-primary" href="#" role="button">
      <i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>

  </div> <!-- /valign-middle -->
</div> <!-- /valign-wrapper -->

Results (red border shows the valign-middle div):

And a working jsfiddle.