CSS, 2024년 드디어 코드 한줄로 수직 정렬 기능 추가 : align-content

 

안녕하세요 찐망고입니다.

드디어..

드디어 CSS가 추가로 지정되는 속성 없이 코드 한 줄로 요소를 수직정렬하는 기능이 생겼네요.

 

과거 요소들을 수직정렬하기 위해(특히 center) 행했던 수많은 수직정렬의 역사들이 주마등처럼 스쳐 지나가네요.

 

새로 코드가 생긴 건 아니고, 원래 flex나 grid에서 사용했던 CSS코드였는데요.

flex나 grid 없이 사용이 가능하게 되었습니다. (와! 짝짝짝)

align-content: center;

 

테스트를 여러 번 해보니 기본 좌우 정렬해서 수직정렬하는 건

flex나 grid를 사용하면 될 것 같고

a링크요소들처럼 버튼처리해서 만드는 요소들은 수직정렬하기가 편하겠어요.

 

center 외 start, end로 값을 지정할 수 도 있겠지만 안 쓸 거 같죠..?

크롬 123, 파이어폭스 125, 사파리 17.4 버전부터 지원합니다.

 

아래 aling-content 한 줄로 정렬한 요소들을 확인해 보세요.

 

See the Pen CSS수직정렬 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

과거부터 사용했던 수직정렬의 역사

 

1. 테이블 셀

 - 나 이 코드 오래 했어요 하는 분 손? 최소 10년 넘으신 분 

 - 유일하게 수직정렬이 가능했던 테이블 셀 속성을 이용했던 방법

 - 웃음밖에 안 나옴 

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

 

2. 포지션 사용

 - 부모 포지션 기준으로 자식요소를 수직 정렬하는 방법

 - 지금도 많이 쓰죠 slide에서 arrow버튼 중앙정렬할 때나 콘텐츠 중앙정렬하거나 할 때..(수직 말고..)

 - 이게 높이기준이라 부모요소에 높이값이 있어야 함. 

 - 반응형 사이트에 높잇값 함부로 잡았을 때의 미디어쿼리를 봐야 저걸 안 쓸 텐데..
 - 단점: 정신건강에 안 좋음

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

 

3. 가상요소 사용

 - 가상요소 before나 after에 이미지나 텍스트 넣고 정렬

 - 인라인요소들끼리 혹은 인라인블록요소들끼리 수직정렬할 때 많이 쓰임

 - 백그라운드 이미지 넣고 많이 쓰던 방법인데, 지금은 대신 inlne-flex를 쓰죠?

<div class="container">  
  <div class="content">Content.</div>  
</div>

.container::before {  
  content: '';  
  height: 100%;  
  display: inline-block;  
  vertical-align: middle;  
}  
.content {  
  display: inline-block;  
  vertical-align: middle;  
}

 

4. flex사용

 - 20년 만에 널리 사용가능해진 flex

 - 한 줄로 좌우 정렬 시키고 align-items를 사용하여 수직 정렬

<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>

 

 - 혹은 줄을 세로로 만들고 justify-content를 사용하여 수직 정렬

<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>

 

5. grid사용

 - 1~2년 전부터 널리 사용

 - align-content는 셀을 컨테이너에 정렬하고, align-itmes는 콘텐츠를 셀에 정렬함

<div style="display: grid; align-content: center;">
  <div>Content.</div>
</div>

<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>

 

 

 

 

 

 

 

 

출처

align-content - CSS: каскадные таблицы стилей | MDN

CSS finally adds vertical centering in 2024 | Blog | build-your-own.org