css를 활용해 가로 및 세로로 중앙정렬하는 방법에는 정말 많은 방식들이 있습니다. 각 중앙정렬 방법은 모두 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 중앙정렬 기법을 만들어낼 수 있습니다.
블록 만들기
반응형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의 .container 요소를 만듭니다.
컨테이너 요소가 적절히 늘려질 수 있도록 html, body { width: 100%; height: 100%; }로 지정합니다.
테이블로 바꾸기
이제 .container 안에서 자주 사용되는 테이블 패턴을 이용해 수직 중앙정렬을 하도록 하겠습니다. 이렇게 하려면 일반 블록 레벨 요소가 필요하고, 이 요소들이 테이블 셀처럼 동작하게 만들면 수직 중앙정렬이 가능해집니다.
이 안에는 높이가 동적으로 변하는 텍스트 블록이나 절대 위치가 지정된 요소를 비롯해 여러분이 원하는 어떤 것이든 배치할 수 있습니다.
수정사항 적용
요소의 수평 중앙정렬을 변경하려면 .inner의 text-align 프로퍼티만 수정하면 됩니다. 수직 중앙정렬을 변경하려면 .inner의 vertical-align 프로퍼티를 수정하면 됩니다.
결론
이 예제는 마크업할 게 많아 보일 수도 있지만 실제로 동작하는 부분은 세 개의 div인 .outer, .inner, .centered밖에 없습니다. 그리고 이 세 요소에 스타일을 적용하는 것은 일관성을 띠고 있어서 여러 프로젝트에서 사용하는 기본 CSS에 이 기법을 적용하고 다시는 이 부분에 신경 쓰지 않아도 됩니다.
이 기법은 대부분의 중앙정렬 기법보다 요소를 하나 더 사용하지만 아주 견고한 기법입니다.
'개발 > CSS3' 카테고리의 다른 글
| display: inline-block 속성 숨겨진 여백 제거 (0) | 2020.02.13 |
|---|---|
| CSS Normalize & CSS Reset (0) | 2019.08.01 |
| [CSS3] emmet을 통해 효율적으로 CSS를 작성해보자 (0) | 2016.10.17 |
| [CSS3] Position : Float의 부모 height가 적용이 안되는 현상 해결법 (1) | 2016.10.14 |
| [CSS3] Height :100% 가 적용되지 않을때 해결하는 방법 (2) | 2016.10.12 |
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
