Wie zu zentrieren und vertikal ausrichten text innerhalb eines div?

Den code unten vertikal aus richtet den text innerhalb eines div-völlig in Ordnung, aber wenn ich versuche, um es, nur den text, muss gewickelt werden, bekommt zentriert. Wenn der text kurz ist, sagen wir, 5-6 Wörter, der text ist nicht zentriert. Ich weiß nicht, ob es nur mir so oder mache ich etwas falsch hier.

Ich bin mit display: table-cell; zu tun, die vertikale Ausrichtung. Beide div und p Elemente sind definiert in der CSS die gleiche Weise. Haben Sie einen Blick auf die codepen zu sehen, die problem.

<style>
  .outer { outline: 1px solid #eee; }
  .outer > p { 
    display: table-cell; 
    height: 200px; 
    vertical-align: middle;
    text-align: center;
  }
</style>
<div class="outer">
  <p>
    This longer text will be vertically aligned.
  </p>
</div>
<div class="outer">
  <p>
    This longer text will be vertically aligned and centered. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</div>

http://codepen.io/anon/pen/vGowKL

InformationsquelleAutor Orcinuss | 2016-05-24