매우 자주 쓰는 중앙정렬 기초중의 기초이고, 여러가지 방법으로 구현 가능하다.

1. display: flex, align-items: center; justify-content: center;
2. margin: 0 auto; → width연산이 불가할때 적용 안될때 있다. →이럴땐 overflow:hidden!

flex이용한 중앙정렬 Error

개인 프로젝트를 진행 하던 와중, sidebar부분이 계속 왼쪽에 치우지게 정렬되는 걸 볼 수 있었다. margin도 모두 0으로 셋팅했음에도 왜 저러는지 알 수가 없었다.

3개의 글자 수를 모두 똑같이 맞춰주니, 제대로 정렬이 됐지만 이건 내가 원하는 바가 아니었다.

이 문제는 결론적으로, flex-item 항목의 넓이를 아래처럼 명시적으로 셋팅해줌으로써 해결 할 수 있었다.

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

.nav__item {
  width: 33%;
	...
}