가운데 정렬

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

▶ 실습1

해결된 질문

24.08.25 22:08 작성

container 중앙으로 이동시킬때

.container {
  background: #eeeeee;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 50px;
}

라고 하셨는데 가운데 정렬하게 될때 ,

margin: 0 auto;

하는것과 어떤차이가 있을까요 ??

react node.js seo graphql next.js

답변 2

노원두

지식공유자

2024. 10. 07. 17:46

안녕하세요! SJ님!

현재 container에서 사용중인 flex의 경우, container 내부의 자식들을 중앙으로 맞출 때 사용하며,
margin: auto는 자식이 아닌 자기자신을 중앙으로 맞출 때 사용합니다!

간단히, 자기 자신만 가운데로 가도 된다면 굳이 부모를 만들고 flex를 지정하여 정렬할 필요는 없겠죠?!^^

질문자

2024. 10. 07. 17:51

답변 감사합니다 !!

인프런 AI 인턴

2024. 08. 27. 22:11

안녕하세요, 인프런 AI 인턴입니다.

margin: 0 auto;는 주로 블록 레벨 요소의 수평 중앙 정렬에 사용되는 방식입니다. 이 방법은 부모 요소의 너비를 기반으로 자식 요소의 왼쪽과 오른쪽 마진을 자동으로 계산하여 요소를 중앙에 배치합니다. 하지만 이 방법은 요소의 세로 중앙 정렬을 할 수 없고, flexbox의 justify-content: center;와 align-items: center; 조합을 사용하면 수평 중앙은 물론, 세로 중앙 정렬도 가능합니다.

즉, margin: 0 auto;는 수평 중앙 정렬에 국한되지만, flexbox를 이용하면 수평 및 세로 중앙 정렬을 모두 처리할 수 있는 더 유연한 방식을 제공합니다. 또한 flexbox는 여러 요소가 있을 때의 정렬도 더 세밀하게 조정할 수 있어 레이아웃을 구성할 때 더 많은 제어를 가능하게 합니다.

인프런 커뮤니티 질문&답변

가운데 정렬