センターテキストをCSSに揃える方法は？

Question

私はテキストを含むdivタグを持っており、このdivの内容を垂直に中央に揃えたいと思います。ここで

は私のdivのスタイルである：ここで

div { 
    height: 200px; 
    line-height: 200px; 
    text-align: center; 
    border: 2px dashed #f69c55; 
    } 
    span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal; 
    } 

は私のhtmlは、私は下の画像のようにテキストをしたい

<div> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span> 
</div> 

です： -

i.stack.imgur.com/a5wQe .png

Answer 1

display:table〜divとdisplay:table-cell~span となります。

div { 
 
     
 

 
    text-align: center; 
 
    border: 2px dashed #f69c55; 
 
    display:table; 
 
    height:300px; 
 
    } 
 
    span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    
 
    }

<div> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span> 
 
</div>