박스 가운데 정렬에 다양한 방법이 있는 이유

초기 CSS1는 A4용지 한 장에 다 쓸 수 있을 정도로 스펙이 적었습니다. CSS2도 스펙이 적을뿐더러, 그 스펙 중에서 가운데 정렬을 하는 방법을 개발자들이 꼼수(?)로 찾습니다.

margin: 0 auto;를 사용한다는지 position 값을 주고 left값과 transform값을 준다든지, line-height를 준다든지, 혹은 부모 요소에서 text-align: center;를 사용하여 자식 요소를 가운데 정렬하든지 등 방법을 사용하여 박스를 가운데 정렬을 해주었습니다.

 

이에 가운데 정렬의 필요성이 대두되다보니 flex와 grid를 만들어내면서 가운데 정렬을 편하게 할 수 있도록 만들어주었습니다.

 

얼른 flex와 grid를 지원하는 웹브라우저를 많이 사용하는 날이 왔으면 좋겠습니다!

 

* 추가

<table> 태그를 사용해서 레이아웃을 구성하는 사이트가 가끔 있습니다. <table>로 만드는 레이아웃은 repaint와 reflow 측면에서 퍼포먼스가 상당히 떨어진다는 것을 유념해야 합니다.