1. 가장 기본적인 가운데 정렬
margin: 0 auto;
가장 많이 쓰는 가운데 정렬이다. 자신의 넓이를 정한다음에 사용하면 저절로 가운데 정렬이 된다.
1) 해당 박스가 inline 속성인 경우
2) 폭의 연산이 불가능하면 가운데 정렬을 할 수 없다.
이러한 경우에는 다른 방법을 써야한다
2. flex를 이용한 가운데 정렬
justify-content: center; // 수평 중앙
align-items: center; // 수직 중앙flex를 이용한 가운데 정렬을 하려면 해당 박스에 display: flex를 하고 justify-content: center를 해야한다. 만약 박스가 2개 이상 있다면 중앙을 기준으로 같은 거리에 떨어진다.
수평뿐 아니라 수직으로도 정렬을 하고 싶다면 추가로 align-items: center; 를 써주면 된다. 이것또한 가운데 기점으로
이동한다.