텍스트 세로 가운데, 중앙 정렬 방법 (html, css)

위의 화면처럼 구현하려면

<div style="height: 300px; background-color: #aaa; width:100%; display:table;"><div style="text-align:center; display: table-cell; vertical-align: middle;">안녕하세요.</div></div>

위 코드처럼 스타일 값을 주면 된다.

<style>
.test {
height: 200px;
background-color: #aaa;
width:100%;
display:table;
}
.tin {
text-align:center;
display: table-cell;
vertical-align: middle;
}
</style>
<div class="test"><div class="tin">안녕하세요.</div></div>

똑같은 방식을 조금 다르게 구현하면 이렇다.