가운데 정렬의 몇가지 방법

1. Display: flex

justify, align 을 center로...!

 

 

2. text-align : center

 

3. margin : auto;

auto를 하면 자동으로 정렬한다.

가운데 정렬시키려는 영역의 크기가 설정이 꼭 돼 있어야 함.

 

 

4. transform

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)

 

 

top, left 50% 로 contents 박스의 좌상단 꼭지점이 가운데 정렬시키려는 container의 정 중앙에 위치하게 되고

translate해서 contents 박스의 가운데를 가운데 정렬시키려는 container의 정 중앙에 위치하게 만들어준다.

 

 

 

https://liis.tistory.com/28