---

float: center 구현: 가운데 정렬

[ CSS 목차 보기 ]

아래처럼 레드박스를 가운데 정렬을 하고 싶다. float: center를 입력하면 저렇게 자동적으로 처리되면 좋을 것 같지만, float 프로퍼티는 center 라는 속성값을 가지지 않는다. 어떻게 하면 아래와 같이 block 속성을 가지는 div 레드박스를 한 줄로 넣고, 가운데 정렬을 할 수 있을까?

이를 구현할 수 있는 여러가지 방법이 있는데, 이번 포스트에서는 가장 기본적인 방법인 테두리선 가이드 전략으로 구현해볼 생각이다. 다양한 방법으로 구현 가능하지만, 몇몇 기능들은 하위 브라우저 버젼에서는 동작하지 않는다. 따라서 모든 브라우저 버젼에서 동작할 수 있는 기본 방법을 소개하고자 한다.

기본 아이디어

기본 구현방법은 먼저 아래 왼쪽의 HTML 구조를 오른쪽과 같이 바꾸는 것이다. 레드박스들과 백그라운드 요소 사이에 1개의 레이어 요소를 만든다. 이 레이어들의 class를 center로 설정하겠다. 먼저 .center 요소^{[참고 3. 클래스 선택자]}의 오른쪽 테두리선을 백그라운드 요소의 중앙에 정렬을 시킬 것이다. 그런 다음 레드박스 요소들의 중앙을 .center 요소 오른쪽 테두리선으로 옮겨주면, 백그라운드의 가운데 정렬이 가능하다. 말로 설명하는 게 더 어려움으로 아래에 구현 과정을 차근차근 보자

1. 기본 구현

먼저 아래 결과의 기본적인 형태를 작성해보자.

• HTML 기본 구조
  백그라운드로 div#container (line 1)를 둔다.^{[참고4. ID 선택자]} 그리고 그 밑에 div.center (line 2와 line 12)를 두고, 그 아래 div.red-boxes을 둔다. div.red-boxes 아래에는 실제 레드박스 div.box들이 배치되어 지는데, float: left를 이용하여 가로 배열시킬 것이다.^{[참고 5. float: left]} 그리고 div.clear (line 7, line 10, line 19, line 22)를 통해 영역분리를 시켜준다.^{[참고 1. clear: both로 영역분리]}

• .box의 CSS
  float: left; // 레드박스들을 같은 행에 배열 시킨다.
  그 외의 CSS들은 모양/크기/색깔에 대한 기본적인 설정이다.
• .clear의 CSS
  clear: both; // 영역을 분리시켜 준다.^{[참고 1. clear: both로 영역분리]} 다른 방법으로도 부모 요소에 overflow: hidden으로 영역을 구분할 수 있다.^{[참고 2. overflow: hidden으로 영역분리]}

2. 테두리선 정렬

다음 단계로 div.center를 설정해보자. 앞에서 언급했던 것처럼 div.center의 오른쪽 테두리선을 div#container의 중앙으로 정렬한다. 아래 결과 모습을 먼저 보자. div.center는 시각화를 돕기 위해 파란선으로 표시했다.

• .center의 CSS
  어떻게 오른쪽 테두리선을 백그라운의 중앙으로 옮기는지를 눈여겨 보자.
  border: 1px solid blue; // 시각화를 돕기 위해 파란선으로 표시. 실제 구현시에는 필요없음 – line 3
  float: right; // 1행과 2행에 위치한 div.center들을 오른쪽 정렬 시킨다. HTML 구현 파트 line10에 있는 div.clear 덕분에 한 행에 배열되지 않고, 2행으로 오른쪽 정렬된다.
  position: relative; // 위치 속성(여기서는 left)를 사용하기 위해서는 position 설정이 필요하다.
  left: -50%; // left 좌표를 부모 요소의 width 기준으로 -50%로 옮긴다. 즉 백그라운드의 중앙이 된다.
• .red-boxes의 CSS
  border: 1px solid red; // 시각화를 돕기 위해 빨간색으로 표시. 실제 구현시에는 필요없음 – line 9
  

3. 테두리선 위에 올리기

이제 마지막으로 남은 일은, 아래와 같이 div.red-boxes의 중심(빨간색)을 div.center의 오른쪽 테두리선으로 올리는 것이다.

• .red-boxes의 CSS
  position: relative; // 위치 속성(여기서는 left)를 적용하기 위해 position 설정이 필요하다.
  left: 50%; // 부모 요소인 div.center의 오른쪽 테두리선에 가운데 정렬 시켜주기 위해 50% 이동시켜준다.
  * 참고로 요소를 이동시키는 방법 중에는 위치속성(left, right, top, bottom)과 transform이 있다. 하지만 이 둘의 작동 원리에 차이점이 존재한다. ^{[참고 6. 위치속성과 transform의 차이점]}

총정리

마지막으로 총 코드를 적어보면 아래와 같다.

참고
[1] float에서 clear: both로 영역분리하기
[2] float에서 overflow: hidden으로 영역 분리하기
[3] 클래스 선택자
[4] ID 선택자
[5] float: left, float: right
[6] 위치속성과 transform의 차이점]
[ CSS 목차 보기 ]