HTML에서 가운데 맞춤은 흔하게 필요한 UI 표현이다. 예를 들어 다음과 같이 회색 블록 안에 있는 작은 블록이 정 중앙에 위치하도록 만드는 경우다.
가로로는 가운데 맞추기가 쉽다. 안쪽 블록에 width를 주고 left-margin, right-margin 값이 auto로 되게만 만들면 된다.
<div>
<div style="width: 150px; margin: auto;">가로로 가운데 위치함</div>
</div>그런데 세로로는 맞추기가 쉽지 않았다. 인터넷에 그 동안 여러가지 방법이 제시됐었는데 특정 상황에만 되는 제한적인 방법이거나 html, body 태그의 스타일을 설정한다든지 픽셀 단위로 크기와 마진 등을 일일이 지정해야 하는 등 불편한 방법들이었고 손쉽게 적용하기 힘들었다. 그래서 프론트 코딩 개발자(또는 퍼블리셔)들은 이런 불편함을 겪을 바에야 차라리 작업하는 디자인에만 적용되게 margin을 주거나 절대 좌표로 위치시키는 방법을 썼다. 이것은 결국 디자인이 바뀌면 틀어질 수 밖에 없는 문제가 있는 방법이다.
그런데 최근 누군가가 아주 일부 사람들만 알고 있는 방법을 만천하에 공개함으로써 새로운 장을 열었다. 이 방법은 여러 상황에도 손쉽게 적용할 수 있음을 다양한 예시로도 만들어 보여주고 있다.
요약하자면 바깥 블록에는 postion: relative 스타일을 주고 안쪽 블록에는 높이 및 margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0;을 지정하면 된다. 이 글 초반에 보인 박스 두 개 예시는 바로 다음과 같이 작성된 것이다. (경계선이나 색깔 스타일 등은 편의상 삭제했다)
<div style="width: 400px; height: 240px; position: relative;">
<div style="width: 200px; height: 100px; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
이 박스는 바깥 박스의 정 중앙에 위치한다
</div>
</div>position: absolute와 margin: auto 등의 조화로 이러한 결과가 나타나는 것으로 생각된다. 또 하나를 배웠다. 인터넷은 참 배울 게 무궁무진하다.