flex로 요소 가운데 정렬하는 방법

flex로 요소 가운데 정렬하는 방법에서 먼저 볼 부분

flex 가운데 정렬은 부모 요소에 display:flex를 주고, justify-content와 align-items를 함께 이해해야 합니다.

가운데 정렬은 자식이 아니라 부모에게 적용하는 경우가 많습니다. 부모가 flex 컨테이너가 되어야 자식 정렬 규칙이 동작합니다.

justify-content는 주축 방향 정렬이고 align-items는 교차축 방향 정렬입니다. 기본 flex-direction이 row라면 가로와 세로처럼 느껴집니다.

세로 중앙 정렬이 안 된다면 부모 높이가 충분한지 먼저 봐야 합니다. 높이가 없으면 중앙으로 보낼 공간도 없습니다.

로그인 박스 중앙 배치

.page-center {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box { width: 320px; }

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

잘못 작성했을 때 나타나는 흐름

CSS 글은 속성 하나만 외우기보다 부모 요소와 자식 요소의 관계를 같이 확인하는 방식으로 읽는 것이 좋습니다.

스타일이 적용되지 않을 때는 개발자 도구에서 어떤 규칙이 취소선 처리되는지 먼저 보면 원인을 빠르게 좁힐 수 있습니다.

모바일 화면에서는 고정 너비, 긴 코드, margin 조합이 문제를 만들기 쉬우므로 작은 화면 기준까지 함께 확인해야 합니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 정렬하려는 요소의 부모에 display:flex 넣기
• 부모 높이가 충분한지 확인하기
• 가로/세로 정렬 속성을 함께 확인하기
• flex-direction을 바꿨다면 주축도 바뀌는지 확인하기