[CSS] 수직 정렬의 3가지 방법(padding, line-height, position)

🌎 Web/CSS

[CSS] 수직 정렬의 3가지 방법(padding, line-height, position)

오늘 ONEUL 2022. 3. 28. 02:39

수직정렬, 수평 정렬, 중앙 정렬 중 오늘은 수직정렬에 대해 알아보자!

수직정렬에는 3가지 방법이 있다.

padding 속성 사용
line-height 속성 사용
position 속성과 transform 속성 사용

전체적으로 사용할 예제

<div class="각 속성의 이름">
    <div>
        <h1>제목</h1>
        <p>내용</p>
    </div>
</div>

부모 <div> 를 간단하게 컨테이너라고 지칭하겠다.

1. `padding` 속성 사용

.padding {
    width: 400px;
    background-color: orange;
    padding: 100px 0;
}

padding-top 과 padding-bottom 에 동일한 값을 준다. (예시에서는 padding: 100px 0; 으로 한 번에 top과 bottoom 값 설정)

장점 - 컨테이너의 높이값이 정확하지 않을 때 간단하게 사용할 수 있다.
단점 - 내가 설정한 padding 값으로 컨테이너의 높이값이 결정되기 때문에 정확한 높이값이 있을 때는 사용하기 어렵다.

2. `inline-height` 속성 사용

.line-height {
    width: 400px;
    height: 300px;
    line-height: 300px;
    background-color: yellow;
}
.line-height > div {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}

컨테이너 안의 자식 요소가 한 줄인 경우
- 컨테이너의 height 값과 line-height 값을 동일하게 설정하는 것만으로 가능하다.
컨테이너 안의 자식 요소가 두 줄 이상인 경우
- 위와 마찬가지로 컨테이너의 height 값과 line-height 값을 동일하게 설정한다. (예시에서는 300px로 설정)
- 자식 <div> 의 line-height 속성을 normal 로 설정해 본래 간격으로 돌려놓는다.
- vertical-align 설정을 하기 위해 display 속성을 inline-block 으로 설정한다. (vertical-align 속성은 block 속성에서 적용되지 않기 때문)
- 마지막으로 vertical-align 속성을 middle 로 설정한다.

장점 - 컨테이너의 높이값을 정확히 알고 있을 때 사용하기 좋다.
단점 - 컨테이너의 높이값을 정확히 모른다면 사용하기 어렵다. 그리고 부모 요소의 높이가 고정되어 있을 때만 사용할 수 있다.

3. `position` 속성과 `transform` 속성 사용

.position {
    width: 400px;
    height: 300px;
    background-color: green;
    position: relative;
}
.position > div {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}