‘it works on My Machine’이 커뮤니케이션 버그이고 코드 버그가 아닌 이유

Source: Dev.to

문제가 된 코드

body {
  margin: 40px auto; 
  text-align: center;
}

결과: 왼쪽 정렬. 왜?

해결 방법: margin: auto는 너비가 필요합니다

margin: auto는 남은 가로 공간을 균등하게 나눕니다. 요소에 width: 100%가 지정돼 있으면 남은 공간이 없으므로 나눌 것이 없습니다.

수정된 CSS

body {
  width: 90%;           /* 남은 공간을 만듭니다 */
  max-width: 600px;     /* 너무 넓어지는 것을 방지합니다 */
  margin: 40px auto;    /* 이제 가운데 정렬됩니다 */
  text-align: center;
}

고객에게 설명하는 방법

오븐만큼 넓은 베이킹 트레이는 가운데에 놓을 수 없습니다. width: 90%로 “챠파티”를 줄이면 margin: auto가 중간으로 슬라이드합니다.

버그를 고치는 다른 방법

컴포넌트를 위한 Flexbox

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

전체 페이지용 Grid — 한 줄

.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

디버그 체크리스트

DevTools → Computed 탭에서 확인:

1. width: auto인가요? width: 90% 혹은 600px 같은 고정 너비를 추가합니다.
2. display: inline인가요? block으로 변경합니다.
3. 수직 중앙 정렬을 원한다면: 부모 요소에 높이가 있나요?

라이브 데모

Live demo of my page