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

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

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

1. padding 속성 사용
2. line-height 속성 사용
3. position 속성과 transform 속성 사용

 

 

---

 

 

전체적으로 사용할 예제

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

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

 

 

 

 

1. padding 속성 사용

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

padding 속성을 사용한 수직정렬

• 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;
}

inline-height 속성을 사용한 수직정렬

1. 컨테이너 안의 자식 요소가 한 줄인 경우
   • 컨테이너의 height 값과 line-height 값을 동일하게 설정하는 것만으로 가능하다.
2. 컨테이너 안의 자식 요소가 두 줄 이상인 경우
   • 위와 마찬가지로 컨테이너의 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%);
}

position 속성과 transform 속성을 사용한 수직정렬

1. 부모 <div> 인 컨테이너의 position 속성을 relative 로 설정한다.
2. 자식 <div> 의 position 속성을 absolute 로 설정한다.
3. top: 50%; 로 설정하고 transform: translate(0, -50%); 으로 설정한다.

• 장점 - line-height 속성과는 다르게 부모 요소의 높이값에 변동이 있어도 사용 가능하다.
• 단점 - position 설정으로 인해 다른 레이아웃과의 관계를 신경 써야 한다.

 

 

 

수직 정렬의 3가지 방법과, 각 장단점에 대해 알아보았다.

경우에 따라 알맞은 방법을 사용하는 것이 좋겠쥬? 😉

 

 

 

 

※ 참고자료

https://oursmalljoy.com/css-%EA%B8%80%EC%9E%90-%EC%88%98%EC%A7%81-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC-text-vertical-align/

https://www.w3schools.com/css/css_align.asp