CSS 수직 중앙정렬의 역사

퍼블리싱을 처음 시작할 때, 수직 중앙 정렬에 대한 정석적인 방법을 찾기 어려워 답답함을 느꼈다.

하지만 align-content를 단독으로 사용하면서 이 부분에 대한 답답함이 해결되었고,

이제는 어느정도 속시원하게 처리할 수 있게 되었다.

그래서 이 과정에서 사용했던 방법들을 정리해 보려고 한다.

 

1. 테이블 셀을 이용한 방법.

<div style="display: table;">
  <div style="display: table-cell; vertical-align: middle;">text</div>
</div>

 

퍼블리싱을 시작한 초반에는 이 방법을 제외하고는 position: absolute를 사용해야 했기 때문에 자주 사용했다.

그러나 테이블 요소를 사용해야 하므로, 용도에 맞지 않음을 알고있기에 찝찝하게 사용했다.

 

2. line-height를 이용한 방법

<div style="height: 100px; line-height: 100px;">text</div>

 

텍스트가 한 줄일 때는 괜찮았지만, 여러 줄이 되면 무용지물이 되어 지양하던 방법이다.

반응형일 경우 더욱 맞지 않아서 더 이상 사용하지 않았다.

 

3. position을 이용한 방법

<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">text</div>  
</div>

 

출력만 시키면 간단하게 수직 중앙 정렬을 할 수 있었지만, 부모 요소에 높이값을 설정해야 하고,

반응형에서 취약하다는 단점이 있었다. 그래서 이 방법도 가급적 피했다.

 

 

그 후, flexbox와 grid를 사용하여 align-items: center를 설정하는 방법이 등장하면서 수직 중앙 정렬의 갈증이 해소되었다. 이 방식은 매우 직관적이고 쉽게 사용할 수 있지만, display: flex나 display: grid를 지정한 뒤 사용해야 한다는 불편함이 있었다.

 

하지만 최근 align-content 속성이 거의 모든 브라우저에서 지원(IE 제외)되면서, 이제는 단독으로 수직 중앙 정렬을 간단히 할 수 있게 되었다. 이제 아래와 같은 방식으로 간단하게 중앙 정렬을 맞출 수 있다.

 

4. align-content를 이용한 방법 (현재 주로 사용)

<div style="align-content: center;">  
  text
</div>

 

수직 중앙 정렬의 방법은 시대와 기술에 따라 변해왔다.

이전에는 table cell이나 position, line-height 등을 사용해야 했고, flexbox와 grid가 등장하면서 좀 더 편리해졌다.

그리고 최근에는 align-content 속성이 큰 역할을 하게 되면서, 더 간단하고 직관적으로 해결할 수 있게 되었다.

이제는 수직 중앙 정렬이 아주 간단한 작업이 되었으니, 이에 대한 고민을 덜어 좋고 앞으로 다른 부분에서도 css의 다양한 발전이 기다려지는 요즘이다.