CSS에서 max-width 설정 시 반응형 중앙 정렬 문제 해결하기 (tailwind : max-w-screen-sm)

 

모바일 화면에서 max-w-screen-sm ( max-width: 640px ) 등의 고정 너비를 줄 경우,

 

div가 부모 요소의 전체 너비(width: 100%)를 차지하게 되고,

이로 인해 마치 가운데 정렬된 것처럼 보이는 시각적 효과가 생깁니다.

 

 

그로 인해서 해당 사이즈를 초과하는 테블릿이나 PC 화면에서는 

컨텐츠가 가운데 정렬이 안된 것 처럼 보이는 현상이 생기게 됩니다.

이때는 명시적인 중앙 정렬이 필요하게 됩니다.

 

해당 사이즈 이상의 화면에서는 별도로 미디어 쿼리를 주고

 좌우 마진을 auto를 주면 좌우 정렬이 됩니다.

 

 

@media (min-width: 768px) {
  margin: 0 auto ;
}

혹은 

 

테일윈드에서는 md:mx-auto 추가

 

 

 

<section class="bg-green px-4 py-8 sm:py-20 lg:px-12 2xl:my-8 2xl:rounded-xl dark:bg-primary-900">
  <!-- 기본적으로 flex로 인해 모바일에서는 가운데 정렬됨 -->
  <!-- md 이상에서는 max-w-screen-sm으로 인해 고정 너비를 가지므로 md:mx-auto로 가운데 정렬 필요 -->
  <div 
  	class="flex max-w-screen-sm flex-col gap-y-8 rounded bg-primary-300 p-8 shadow-md shadow-green md:relative 
  	md:mx-auto" <-- 추가
    >
    // ... existing code ...
  </div>
</section>

 

425px 화면 / 768px 화면

 

 

좌우 마진을 auto 로 주어 정렬이 되게 됩니다