CSS로 콘텐츠를 세로 가운데 정렬하는 간단한 방법

CSS와 HTML로 디자인 요소를 세로 정렬해 봅시다! 많은 사람이 찾는 방법이지만, 초보자에게 세로 가운데 정렬은 생각보다 쉽지 않습니다. 아래 방법은 이를 구현하는 가장 간단한 방법 중 하나입니다.

데모: CSS로 세로 가운데 정렬하기

HTML

아래 코드를 복사해 HTML 문서에 붙여 넣으세요.

<div class="div-outer">
    <div class="div-inner">
        <h4>Box One</h4>
        <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Two</h4>
        <p>Vertical Align Middle</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Three</h4>
        <p>Vertical Align Center</p>
    </div>
</div>

CSS

아래 코드를 복사해 CSS 파일에 붙여 넣으세요. 바깥쪽 div에는 같은 min-height와 line-height 값을 지정해야 하며, 이 예제에서는 둘 다 200px입니다.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

위 CSS가 동작하지 않는다면 아래 대안을 사용해 보세요.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

상자와 텍스트의 색상은 자유롭게 바꿀 수 있습니다. 즐겁게 만들어 보세요!