센터 텍스트를 CSS와 정렬하는 방법은 무엇입니까?

Question

텍스트가 포함 된 div 태그가 있는데이 div의 내용을 세로 가운데 맞춤으로 정렬하려고합니다.

i.stack.imgur.com/a5wQe - : 여기

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

이

<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 싶어 텍스트 아래 이미지처럼 내 HTML입니다 : 여기

내 사업부 스타일이다 .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>