CSS margin의 auto값을 활용한 요소 가운데 정렬

CSS에서 요소간의 배치를 다룰때 flex나 grid를 사용하면 원하는 구조를 빠르고 편하게 구현할 수 있다.

특히 각 요소들을 가운데 정렬하여 깔끔한 UI를 구현할때 flex를 활용하면 매우 편리하다.

하지만 flex를 사용하지 않고 margin값만으로도 요소를 가운데에 정렬할 수 있다.

 

 

1. margin값으로 요소 가운데 정렬하기

margin: auto 값을 주어 가운데정렬을 하기 위해서는 몇가지 조건이 있다.

1-1. 수평정렬(가로 가운데 정렬) 조건

• 블록 요소여야 함 (인라인 요소의 경우 display값을 block 혹은 inline-block값으로 지정해야함)
  ※ 블록요소는 기본적으로 부모요소의 가로너비 전체를 차지하며 다음 요소는 아래로 내려가게 된다. 그렇기때문에 좌우 공간을 이미 확보하고있는 블록요소는 자동으로 margin값을 계산해 가운데정렬이 가능하다.
  ※  하지만 내용물만큼의 너비와 높이를 차지하는 인라인요소는 자동으로 마진을 계산할 공간이 존재하지 않는다. 좌우 공간은 다른 요소나 컨텐츠가 배치되기 때문이다.
• 너비값이 명시되어야 함 (필요에 따라 부모요소의 너비값 명시)

※ 수직정렬(세로 가운데 정렬) 조건 : flex 사용을 권장

• 블록 요소여야 함 
• 부모요소의 높이가 명시되어야 함 (수평과 다르게 기준점이 없으므로)
• 정렬할 요소의 높이가 명시되어야함
• position 속성과 위치 지정 속성을 활용해야 함

 

 

2. 수평정렬에서 flex가 아닌 margin값을 사용하는 상황

1. 기존 레이아웃과의 호환성, 단순한 코드 유지보수
   : 오래된 코드에서 flex를 도입하기 어려울 수 있다. 이미 작동하고 있는 레이아웃에 flex를 통한 변화를 주는것보다 margin값을 활용하는것이 더 간단할 수 있다.
2. 단일 요소의 수평 정렬
   : 단일 블록요소를 정렬할때는 margin값으로 간단히 해결할 수 있다.
3. CSS 그리드와의 결합
   : 그리드 아이템을 정렬할때 flex를 추가로 사용하는것보다 margin값을 활용하는것이 더 간단할 수 있다.
4. 이외 브라우저 호환성, 인쇄스타일을 위한 일관된 UI 등 특정 상황

 

3. 결론

대부분의 경우 flex를 활용해 요소를 원하는대로 정렬하는것이 빠르고 편리하지만 필요한 경우, margin값을 활용할 수 있도록 margin 속성을 이용해 요소를 정렬하는 방법도 익혀두는것이 좋다.