div内のテキストを中央に配置し、垂直方向に配置する方法は？

Question

以下のコードは、div内のテキストを垂直方向に整列しますが、整列しようとすると、折り返す必要があるテキストのみが中央に配置されます。テキストが短く、例えば5-6語の場合、テキストは中央に配置されません。私はそれが私だけであるか私がここで何か間違っているのか分かりません。

私はdisplay: table-cell;を使用して垂直方向の配置を行います。 divとpの両方の要素がCSSで同じように定義されています。問題を確認するには、codepenを見てください。あなたは物事を単純化するためにフレキシボックスを使用することができます

<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

Answer 1

...子供p年代にはすでに自分でdisplay: table-cellとして設定されています。更新codepen：http://codepen.io/anon/pen/VaoOJp

.outer { 
 
    outline: 1px solid #eee; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.outer > p { 
 
    display: table-cell; 
 
    height: 200px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
}

<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>

Answer 2

.outer >p { 
display: flex; 
height: 100%; 
justify-content: center; 
align-items: center; 
} 

。あなただけdisplay: tableとwidth: 100%としてラップouterクラスを宣言する必要が