CSS : 중앙정렬 총 정리

수평/수직 정렬

요소의 너비와 높이가 고정되어 있는 경우 / 요소의 너비와 높이가 불확정 상태일 경우

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /*요소의 높이/너비의 반(50%)만큼 위/왼쪽으로 이동*/
  transform: translate(-50%, -50%);
}

FlexBox를 사용해서 수평/수직 정렬하기

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}