flex

{
  display: flex;
  justify-content: center;
}

• 가장 쉽고 무난한 방법

margin auto

{
  margin: 0 auto;
}

• margin: auto는 위아래 혹은 좌우의 마진을 동일하게 준다
• 단!!!!!! block 형태는 이미 칸을 다 차지하고 있어 배째라 하며 여백을 만들어주지 않는다.
  • 이럴 땐 가운데 정렬을 원하는 태그의 width를 설정해주면 된다!!!

text-align

{
  display: inline;
  display: inline-block;
  text-align: center;
}

• inline과 inline-block(img 등)은 text align으로 조정 가능하다

transform

{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• absolute가 아니어도 어지간히 먹혔던 것 같은데...아닌가?? 암튼! 혹시 안 되면 꼭 absolute를 넣어주자!
• 모든 요소들은 무게중심이 가운데가 아닌 왼쪽 상단(11시 방향)에 맞춰져 있다.
• 따라서 50%를 주면 내가 생각한 것보다 조금 더 튀어나갈 것이다.
• 이럴 때 transform을 이용해 가운데로 당겨주자!