Unfortunately, when we revised CSS level 2, we discovered that many browsers imposed a limit on what could be centered. In particular, centering something that was wider than its containing block didn’t work. The reason, probably, was that the browsers’ scrollbars were programmed to grow to the right, but never to the left.

요약하자면, 현재 많은 브라우저들이 블럭 요소를 중앙정렬 하는데 제한이 있다는 것입니다. 예를 들어, 어떤 블럭 요소가 그 상위(부모) 블럭 요소보다 넓으면 margin: auto; 는 아무런 동작을 하지 않게 됩니다. 마찬가지로 스크롤바가 오른쪽으로만 늘어나는 브라우저의 특성 상 정확히 사용자의 화면에서 중앙 정렬되어 보이지 않는다는 것입니다. (이런 경우 넓은 자식 요소는 부모 요소와 같은 좌측점을 갖게 됩니다.)

가로 스크롤바가 생겼을 때 margin: auto;를 사용하여 정확히 중앙에 표시되지 않는 예제를 한 번 보세요.

위와 같은 문제를 해결하는 3가지 방안이 제시되었습니다.

• center, auto라는 키워드를 갖는 alignment 속성의 추가
• center, auto, left, right 키워드를 갖는 위와 같은 alignment 속성의 추가
• auto 속성과 비슷하지만 중앙 정렬 문제를 해결하는 any 키워드를 margin 속성에 추가

alignment 속성은 위에 언급한 문제를 해결한 것 – center 키워드 – 으로 기존의 margin: auto; 의 기능과 별도로 구현되며, 2번째 방안인 left, right 키워드는 직관적이지 않았던 margin-left: auto; – 블럭 요소를 우측으로 정렬 – 과 같은 블럭 요소의 정렬도 alignment: left;와 같은 식으로 처리할 수 있도록 하는 속성입니다.

아마도 이 셋 중 하나가 CSS3의 박스 모델에 추가될 것으로 보입니다. 여러분은 셋 중에 어떤 게 나아보이시나요? 저는 2번째 방안이 좋아보이네요. 위의 어떤 방안이든 하위 호환성을 위해 두 개의 중앙정렬 속성을 해결해야 하는데 기왕이면 말끔하게 margin 속성의 정렬 기능을 alignment 속성으로 분리했으면 좋겠네요.