div 태그에 width를 직접 정해주면 텍스트가 자동으로 줄 바꿈을 하지 못하고 div 범위를 벗어나는 경우가 있습니다.

이 문제를 해결하는 방법은 간단합니다. div의 스타일을 정해주는 부분에 "word-break:break-all;" 를 추가하면 됩니다.

word-break:break-all;

예시)

가로 방면에서 가운데를 정렬하게 하는 방법은 잘 알려졌지만, 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>