가로 방면에서 가운데를 정렬하게 하는 방법은 잘 알려졌지만, div 안에서 세로로도 가운데 정렬하는 건 약간 더 까다로운 편입니다. 텍스트가 여러 줄이 되어도 비율을 맞춰 가운데 정렬하게 할 수 있습니다.

CSS 부분

<style>


    .outer {
        display: table;
        width: 300px;
        margin-top: 24px;
    }

    .tablerow {

        display: table-row;

    }
    
    .content {

        width:300px;
        height: 300px;

        vertical-align: middle;
        display: table-cell;

    }
    
    </style>

HTML 부분

<div class="outer">
    <div class="tablerow">
        <div class="content">
가운데에 있을 내용
        </div>
    </div>
</div>