[짧은 CSS 팁] 쉬운 중앙 정렬
CSS의 기본 중의 기본 정렬 맞춰주기
1. position, transform 사용
position, transform 사용하기position: absolute; 는 부모 엘리먼트의 위치를 기준으로 절대적인 위치 값을 설정할 수 있습니다. left와 top을 50%로 설정해 중앙에 정렬하게 합니다. 만약 이렇게만 설정하게 되면 대상 엘리먼트의 좌측 상단이 중앙에 오게 됩니다. 정중앙에 오는 게 목적이기 때문에 transform: translate(-50%, -50%);를 해서 맞춰주게 됩니다.
transform은 대상의 형태를 변형하는 명령이며, translate는 위치를 조정하는 데 사용됩니다. tranlate의 첫 번째 값과 두 번째 값은 각각 x축, y 축입니다. 여기서 -50%라는 값은 대상 엘리먼트(h1)의 크기의 절반만큼을 빼서(-) 이동하라는 의미입니다.
이 방법이 가장 많이 쓰이는 곳은 바로 전면 히어로 배너입니다.
https://aydream.studio중앙에 두고 싶은 구성요소를 묶은 후에 위의 코드를 사용해 간단히 중앙에 위치시킬 수 있습니다.
2. Flex 사용
flex 사용 후 중앙 정렬해주기display: flex; 를 사용하면 중앙 정렬이 훨씬 간편합니다. 몇몇 프론트 개발자들이나 퍼블리셔 중에는 flex를 어려워하는 분들이 있어서 아예 시도도 안 하시는 경우가 있습니다. 중앙 정렬에 사용해보세요. 무척 간단하고, 편리합니다. flex를 사용하면 좋은 점 중 하나는 position:absolute; 를 쓰기 어려운 환경에서 적절합니다.
<div> 안의 텍스트를 정중앙에 위치시킬 때, 버튼의 이미지를 정중앙에 위치시킬 때 등 절대 위치를 적용하기 힘든 모든 상황에 적절하게 사용할 수 있습니다.
3. vertical-align, text-align 사용
고양이들과 중앙에 있는 텍스트보통은 1, 2번으로 처리가 가능합니다. 그러나 display: inline-block;을 사용하고, flex를 절대 쓰고 싶지 않은 분들이라면 이런 방법도 있습니다.(https://codepen.io/joshephan/pen/ExyrEyW) 하지만 저는 사용 안 하는 방법입니다. vertical-align은 사용해보시면 아시겠지만 동일한 레벨에 있는 다른 엘리먼트의 높이에 영향을 받고, 부모 엘리먼트의 높이가 변할 때 따라서 반응하지 않습니다.
4. line-height 이용하기
fontawesome과 같은 폰트 기반의 아이콘을 중앙에 위치시켜야 할 때 간단하게 쓸 수 있는 방법입니다. 아이콘을 <span>으로 감싼 후 line-height 값을 직접 입력해 넣어줍니다. 보통은 부모 엘리먼트의 높이를 그대로 입력하면 중앙에 오게 할 수 있는데, 폰트 기반 아이콘의 경우 값을 정확히 입력했을 때 묘하게 중앙이 안 맞는 경우가 있습니다. 이때 line-height를 1px씩 조절해 맞춰주면 됩니다.
5. margin: auto; 사용하기
이 방법은 보통 메인 콘텐츠 컨테이너를 수평 중앙에 둘 때 사용합니다. 좌우 여백이 최대폭을 기준으로 반반씩 정확히 가져가게 할 수 있습니다. 제가 CSS 처음 할 때 margin: auto;를 썼을 때 수평 중앙으로 오는 게 있고 안 오는 게 있어서 혼란스러웠습니다.
먼저 display가 inline, inline-block이면 제대로 작동하지 않습니다. inline은 영역을 차지하지 않고, inline-block은 콘텐츠가 있는 부분에만 영역 처리를 하므로 margin이 제대로 적용될 수 없습니다. 그러므로 영역을 차지하는 display 값(block, flex, grid 등)을 설정해두었는지 확인해주세요. 혹시라도 방금 전 문장이 이해가 안 되신다면 display의 기본 속성들을 제대로 이해하시는 걸 추천드립니다.(CSS의 가장 기본)
6. text-align: center; 사용하기
엘리먼트 안의 구성요소가 텍스트, inline 또는 inline 계열 일 때 수평 중앙에 두는 방법입니다. 위의 margin: auto; 와 마찬가지로 수평 중앙만 맞출 수 있습니다. 보통 텍스트의 중앙을 맞출 때 사용하지만 부모 엘리먼트에 해당 속성을 넣고, 자녀 엘리먼트에 inline 계열 display 속성을 넣어 사용할 수 있습니다. 이 방법에 line-height 값을 부여해서 수직 중앙도 맞춰줄 수 있습니다. 자녀 엘리먼트에 부모 엘리먼트 높이와 같은 적절한 값을 넣어주면 됩니다.
7. Grid와 place-content 사용하기
그리드를 사용해 간단하게 중앙 위치 정렬도 가능합니다. 이 방법은 다른 방법들보다 훨씬 더 간단하고, 코드도 짧지만 많은 분들이 잘 모르는 방법이기도 합니다. 이유는 그리드 메커니즘을 모르는 분들이 많다보니 아예 그리드와 관련된 속성도 자주 사용하지 않는게 아닐까 싶습니다.
영문 버전: https://www.nomcss.com/css/css-easy-center-align
웹 개발, 블록체인 컨트렉트 개발 문의: https://flexweb.io
