CSS(Flexbox)에서 Div를 중앙에 배치하는 방법
CSS Flexbox 레이아웃을 시각적으로 구축합니다. flex-direction, justify-content, align-items, flex-wrap 및 컨테이너의 간격과 자식별 flex-grow, flex-shrink 및 flex-basis가 모두 실시간 미리보기와 복사 가능한 CSS로 제공됩니다.
결과
다음은 CSS에서 가장 많이 묻는 질문에 대한 직접적인 대답입니다. div를 중앙에 배치하려면 display: flex, justify-content: center 및 align-items: center를 상위 항목에 배치하세요. 그게 전부입니다. 컨테이너에 세 개의 선언이 있고 자식은 어떤 크기에서든 컨테이너 내부에서 수평 및 수직으로 완벽하게 중앙에 위치합니다. 이 페이지에서는 정확히 해당 조합이 이미 적용된 생성기가 열리므로 아래 미리보기에서는 현재 번호가 매겨진 세 개의 상자에서 작동하는 모습을 보여줍니다.
Flexbox 이전에는 div를 중앙에 배치하려면 해킹이 필요했습니다. margin: 0 auto는 수평으로만 중앙에 배치되고 고정 너비 블록에서만 작동했습니다. 수직 센터링은 위치를 의미합니다. 음수 여백 또는 변환 트릭이 있는 절대값입니다. 둘 다 콘텐츠 크기가 변경되는 순간 깨지기 쉽습니다. justify-content는 주축을 처리하고 align-items는 교차축을 처리합니다. 함께 어린이의 키나 폭에 관계없이 양방향 중심에 위치하므로 이 쌍이 표준 답변이 되었습니다.
아래 컨트롤을 드래그하고 컨테이너 모양이 변경될 때 세 개의 미리보기 상자가 중앙에 유지되거나 상자 사이에 간격을 추가하는 것을 확인하세요. 올바르게 보이면 하단의 CSS 블록을 스타일시트에 바로 복사하세요. 모든 최신 브라우저에서 동일한 방식으로 실행되며 라이브러리가 필요하지 않습니다.