<div class="text1" id="text1">
    <h1>환영합니다.</h1>
</div>
<div class="text2" id="text2">
    <h1>example<br>sentence.</h1>
</div>
<div class="text3" id="text3">
    <h1><p>also</p>this is example text</h1>
</div>

.text1{
    display: flex;
    flex-direction: center;
    justify-content: center;
    align-items: center;
    }

text1의 경우 justify-content, align-items를 사용하여 상하,좌우 중앙에 배치가 되는데

.text2{ /*text3도 마찬가지*/
    display: flex;
    flex-direction: center;
    justify-content: center;
    align-items: center;
    }

text2와 3 같은 경우는 <p>나 <br> 어떤 것을 써서 줄 바꿈을 해도 좌우는 중앙에 배치되는데 상하가 위쪽으로 배치가 되네요.

text가 두 줄일 때 flex로 중앙에 배치 할 수 있는 방법이 있을까요?