Vertical align durée de texte à l'intérieur inline-block div

Je suis en construction d'un site web avec un design plat. J'ai un en-tête et sous elle, deux blocs de couleur à côté de l'autre. J'ai essayé de flotter à gauche et à droite, mais a été conseillé d'utiliser display: inline-block à la place.

J'ai rencontré un problème, cependant. Je veux mettre du texte à droite dans le milieu de la gauche et le bloc de droite et essayé d'utiliser le alignez-éléments: centre, mais pensé que ne fonctionne que si la div est mis à fléchir.

Donc ma question est, puis-je garder en quelque sorte mon inline-block et d'obtenir mon texte centré au milieu de mes blocs (à la fois horizontale et à la verticale)?

CSS:

    body {
      margin: 80px 0 0;
    }
    #pagewrapper {
      width: 100%;
    }
    #header {
      width: 100%;
      height: 80px;
      background-color: #008B8B;
      position: fixed;
      top: 0;
    }
    .content-left,
    .content-right {
      width: 50%;
      height: 500px;
      color: #FFFFFF;
      display: -moz-inline-stack;
      display: inline-block;
      zoom: 1;
      *display: inline;
    }
    .content-left {
      background-color: #66CC99;
    }
    .content-right {
      background-color: #20B2AA;
    }
    #header-bot {
      height: 800px;
      background-color: #F8F8FF;
    }
    #footer {
      height: 50px;
      background-color: #AFEEEE;
    }
    .title {
      font-size: 18px;
    }

HTML:

<body>
  <div id="pagewrapper">
    <div id="header">
    </div>
    <!-- End of Header -->
    <div class="content-left">
      <span class="title">This is left Content</span>
    </div>
    <!-- End of Content Left -->
    <div class="content-right">
      <span class="title">This is Right Content</span>
    </div>
    <!-- End of Content Right -->
    <div id="header-bot">
    </div>
    <!-- End of Header-Bot -->
    <div id="footer">
    </div>
    <!-- End of Footer -->
  </div>
  <!-- End of PageWrapper -->

</body>