[멋사] CSS 가운데(중앙) 정렬 방법 복습

챈스·2023년 7월 23일

멋쟁이사자처럼 FES 7기

목록 보기

17/30

헷갈리거나 이해가 잘 안되었던 부분 복습하기!!

[들어가기 전..]
멋쟁이사자처럼 FE스쿨 과정 3주 동안 HTML/CSS 과정에 대해 학습하였다.
체득화 해야 할 속성들이 굉장히 많지만, 그 중에서 오늘은 CSS 속성을 활용해 컨텐츠를 가운데(중앙)정렬하는 방법에 대해 복습하고자 한다.

CSS에서 컨텐츠를 정렬하는 방법은 굉장히 다양하다.
그렇다면 다양한 방법마다 "주로 어디에 쓰일까?" 하는 관점으로 복습을 시작해보고자 한다.

CSS 가운데 정렬 방법

1. text-align

text-align: center;
- 텍스트 중앙 정렬
- Element 안의 구성요소가 텍스트, inline 또는 inline계열일 때 수평 방향으로 가운데 정렬하는 방법
- 주로 블록 요소 또는 테이블 셀 상자 내부의 텍스트 가운데 정렬

2. vertical-align

인라인, 인라인 블록 및 테이블 셀 요소의 수직 정렬(블록 요소X)
단, 같은 줄에 인라인 요소가 없으면 해당 속성 적용안됨(상대 적용)
주로 테이블 셀이나 이미지와 같은 인라인 레벨 요소의 정렬에 사용

3. line-height

높이 값을 설정하여 요소를 수직 가운데로 정렬
부모 요소의 높이값과 동일한 높이값을 줘야 수직 가운데로 위치하게 됨
line-height 값은 폰트 사이즈를 포함해서 leading이 차지하는 부분이 합쳐진 총 폰트의 높이
주로 한 줄의 텍스트가 있는 블록 레벨 요소를 정렬할 때 사용

4. margin: auto;

블록 레벨 요소를 수평 가운데로 정렬
부모 요소의 너비를 지정해야 동작함
주로 메인 콘텐츠 컨테이너를 수평 중앙에 둘 때 사용

5. position & transform

position: absolute;는 부모 엘리먼트의 위치를 기준으로 절대적인 위치 값을 설정할 수 있다.
- left와 top을 50%로 설정해 중앙에 정렬
- 하지만, position 값만 주게되면 정중앙에 정렬되지 않음
- transform: translate(-50%,-50%);까지 설정해서 정중앙에 위치
transform은 대상의 형태를 변형하는 명령어로, translate는 위치를 조정하는데 사용함
- translate의 첫 번째 값과 두 번째 값은 각각 x축, y축
- -50%라는 값은 대상 요소(h1)의 크기의 절반(50%)만큼을 빼서(-) 이동하라는 의미
다양한 상황에서 유용하게 사용되며, 절대 위치를 이용하여 요소를 가운데로 정렬할 때 많이 활용됨
- 모달 박스 / 팝업 창
- 로딩 스피너
- 배경 이미지 가운데 정렬

6.flex

display: flex;를 사용하면 중앙 정렬을 간편하게 할 수 있음
장점: position:absolute;를 쓰기 어려운 환경에 사용하기 적절함
div안에 텍스트를 정중앙에 위치시키거나, 버튼의 이미지를 정중앙에 위치시킬 때 등 절대 위치를 적용하기 힘든 모든 상황에 적절하게 사용 가능

🤔 이렇게는 안될까?

text-align과 flex를 이용해서 텍스트를 box 정중앙에 위치시키기?!

우선, 부모 요소에 display: flex;를 준다.
자식 요소에 text-align: center; (수평 중앙 정렬) 해주고, display: flex;, align-items: center;(수직 중앙 정렬) 해준다.
그렇게 나의 호기심이 불러온 실험 결과는..?? 적용 안 됨❌❌❌

🤷🏻‍♀️ Why???
text-align과 flexbox의 align-items 속성을 같이 사용하여 가운데 정렬하려고 하면, 두 속성의 역할과 적용 대상을 혼동할 수 있다. 이 두 속성은 서로 다른 방향으로 요소들을 정렬하는데 사용되며, 한 속성의 영향을 다른 속성이 덮어쓸 수 있다.

위와 같은 이유로 박스 안에 있는 text를 수평, 수직 정중앙에 위치하고 싶다면
- 자식 요소에도 동일하게 display: flex; justify-content: center; align-items: center; 을 사용하거나,
- text-align: center; line-height: 부모 height 동일하게를 사용하면 된다.

7. grid

place-content: center;를 사용하여 수직,수평 가운데 정렬
- 이 속성은 align-content와 justify-content를 함께 설정하는 단축 속성으로, 수평 및 수직 가운데로 정렬됨
그리드 아이템을 가운데로 정렬하거나, 이미지 또는 콘텐츠를 가운데로 정렬할 때, 반응형 디자인에서 요소들을 가운데로 정렬할 때 많이 사용함

CSS 중앙 정렬 참고: https://brunch.co.kr/@skykamja24/514

[가운데 정렬 복습을 마치며...]

복습을 하기 전에는 "가운데 정렬 방법이 엄청 다양하네..😵뭐뭐 있었더라..?" 하면서 가장 기억하기 쉬웠던 margin: auto;만 열심히 적용했었다..
margin: auto;가 적용이 안될 때는 구글링, 챗gpt의 도움을 받곤 했다. 이번 복습을 통해서 가운데 정렬 방법의 종류에 대해 조금 더 명확히 알 수 있었고, 앞으로는 상황에 맞는 가운데 정렬 방법을 사용할 수 있도록 업그레이드 해야겠다!