CSS를 사용하여 DIV를 중앙에 배치하는 방법 [5가지 빠른 방법]

코딩 기술을 사용하여 프로젝트 구축을 시작한 적이 있다면 페이지에서 요소를 중앙에 배치하는 문제에 직면했을 것입니다. "div를 어떻게 중앙에 배치하나요?"라는 질문이 있습니다. 거의 모든 웹 개발자가 접하게 되는 것입니다.

이 블로그에서는 CSS를 사용하여 요소를 중앙에 배치하는 쉬운 방법을 살펴보겠습니다. 기본적인 방법부터 최신 기술까지 요소를 수평 및 수직으로 중앙에 배치하는 방법을 다룹니다. 각 방법은 간단한 예를 통해 설명되므로 정확히 어떻게 작동하는지 확인할 수 있습니다.

CSS를 처음 접하거나 다시 복습이 필요한 경우, 이 가이드는 웹 페이지에서 요소를 중앙에 배치하는 기술을 익히는 데 도움이 될 것입니다. 시작해 봅시다!

DIV란 무엇이며 DIV를 중앙에 배치하는 것을 고려하는 이유는 무엇입니까?

div 또는 Division은 웹페이지에서 다른 요소를 그룹화하는 컨테이너 역할을 하는 기본 HTML 요소입니다.

텍스트, 이미지, 기타 요소 등의 콘텐츠를 정리하는 데 사용할 수 있는 상자라고 생각하면 됩니다. Div는 웹 페이지의 콘텐츠를 구조화하고 스타일을 지정하여 더욱 체계적이고 시각적으로 매력적으로 만드는 데 필수적입니다.

Div를 중앙에 배치하는 것을 고려하는 이유는 무엇입니까?

사용자 경험 관점에서 div를 중앙에 배치하는 것은 매우 중요합니다. 그러나 이는 웹 페이지의 모양과 레이아웃을 극적으로 향상시킬 수 있기 때문에 웹 개발자에게는 스타일링 문제가 될 수 있습니다.

센터링이 중요한 이유는 다음과 같습니다.

• 향상된 가독성 및 미적 측면: 콘텐츠를 중앙에 배치하면 시각적으로 더욱 매력적이며 사용자가 버튼, 양식 또는 이미지와 같은 주요 요소에 더 쉽게 집중할 수 있습니다.
• 반응형 디자인: 레이아웃이 다양한 화면 크기에 맞춰 조정될 때 중앙 정렬은 콘텐츠가 데스크톱에서 스마트폰에 이르기까지 모든 장치에서 균형을 유지하고 보기 좋게 표시되도록 하는 데 도움이 됩니다.
• 주요 요소 강조: 센터링은 "가입" 버튼이나 추천 이미지와 같은 중요한 섹션이나 클릭 유도 문구에 주의를 집중시키는 좋은 방법입니다.
• 더욱 깔끔하고 전문적인 레이아웃: 중앙 레이아웃은 더욱 깔끔하고 세련되어 사이트에 더욱 전문적인 느낌을 줍니다.

CSS를 사용하여 DIV를 중앙에 배치하는 방법(다른 방법)

div를 중앙에 배치하는 방법은 가로, 세로 또는 둘 다로 가운데에 배치할지 여부에 따라 몇 가지 다른 방법으로 수행할 수 있습니다. 다음은 몇 가지 간단한 방법입니다.

CSS를 사용하여 div를 중앙에 배치하는 가장 널리 사용되는 방법은 다음과 같습니다.

방법 1: 자동 여백을 사용하여 Div를 가운데에 배치하는 방법

웹 디자인을 처음 접하는 경우 웹페이지에서 요소를 중앙에 배치하는 것이 까다로워 보일 수 있지만 일단 익숙해지면 매우 간단합니다. div 수평으로 중앙에 배치하는 고전적이고 간단한 방법 중 하나는 자동 여백을 사용하는 것입니다. 단계별로 분석해 보겠습니다.

1. 알아야 할 사항

자동 여백을 사용하여 div 가로 중앙에 배치하려면 다음 단계를 따르세요.

• 1. 너비 제한: 먼저 div 컨테이너의 전체 너비를 차지하지 않는지 확인하세요. 기본적으로 div 는 전체 너비를 채우도록 확장됩니다. 중앙에 배치하려면 최대 너비를 설정해야 합니다.

• 2. 자동 여백 사용: 왼쪽과 오른쪽의 자동 여백은 div 중앙으로 밀어냅니다.

간단한 예는 다음과 같습니다.

HTML

<div class="centered-div">This is a centered div</div>

CSS

.centered-div {

max-width: fit-content; /* Makes the div only as wide as its content */

margin-left: auto; /* Pushes the div to the right */

margin-right: auto; /* Pushes the div to the left, centering it */
}

2. 왜 max-width: fit-content; ?

max-width: fit-content; 규칙은 div 콘텐츠에 따라 필요한 만큼만 너비를 차지하도록 합니다. 200px 같은 고정 너비를 사용한 경우 컨테이너가 너무 좁으면 div 오버플로될 수 있습니다. fit-content 콘텐츠에 맞게 div 크기를 동적으로 조정합니다.

3. 자동 여백은 어떻게 작동하나요?

자동 여백은 배고픈 하마처럼 작동하여 div를 중앙에 배치하기 위해 양쪽에서 균등하게 추가 공간을 차지합니다. 이 방법은 다양한 언어에 맞게 자동으로 조정되며 다른 요소에 영향을 주지 않고 단일 요소를 중앙에 배치하는 데 적합합니다.

두 여백이 모두 auto 로 설정되면 추가 공간을 동일하게 공유하여 div 중앙에 배치합니다.

4. 최신 단축키 사용: margin-inline

margin-left 와 margin-right 별도로 설정하는 대신, 더 깔끔한 접근 방식을 위해 margin-inline 속성을 사용할 수 있습니다.

.centered-div {

최대 너비: 내용에 맞게;

마진 인라인: 자동; /* 왼쪽과 오른쪽 여백을 자동으로 자동으로 설정합니다 */

}

방법 2: Flexbox를 사용하여 DIV를 중앙에 배치하는 방법

Flexbox를 사용하면 항목을 양방향으로 중앙에 쉽게 배치할 수 있습니다. Flexbox를 사용하여 단일 요소를 중앙에 배치하는 방법은 다음과 같습니다.

.컨테이너 {

디스플레이: 플렉스;

내용 정당화: 센터; /* 가로로 가운데 정렬 */

항목 정렬: 중앙; /* 세로로 가운데 정렬 */

}

이 예에서는 .container Flexbox를 사용하도록 설정되었습니다. justify-content: center 속성은 항목을 수평으로 중앙에 배치하고, align-items: center 수직으로 중앙에 정렬합니다.

고려해야 할 몇 가지 핵심 사항:

수평 및 수직 센터링: Flexbox를 사용하면 항목이 컨테이너를 넘치더라도 수평 및 수직으로 쉽게 중앙에 놓을 수 있습니다.

다중 항목 : Flexbox는 다중 항목도 잘 처리합니다. flex-direction: row 사용하여 항목을 행으로 쌓거나 flex-direction :column을 사용하여 수직 스택을 만들 수 있습니다. gap 을 추가하면 항목 사이의 간격을 조정할 수 있습니다.

이 방법은 매우 유연하며 다양한 레이아웃에서 요소를 중앙에 배치하는 데 일반적으로 사용됩니다.

방법 3: 뷰포트에서 DIV를 중앙에 배치하는 방법

팝업이나 배너와 같은 요소를 화면 중앙(뷰포트) 중앙에 배치하려는 경우 CSS 위치 지정을 사용할 수 있습니다. 이를 수행하는 간단한 방법은 다음과 같습니다.

1. 고정 위치의 기본 센터링

요소를 가로 및 세로 중앙에 배치하려면 다음 단계를 따르세요.

• 위치를 고정으로 설정:

– position: fixed; 스크롤할 때 요소가 제자리에 유지되도록 합니다. 요소를 화면에 붙이는 것과 같습니다.

• 삽입을 사용하여 고정:

– inset: 0px; 뷰포트 가장자리(위쪽, 오른쪽, 아래쪽, 왼쪽)에서 요소의 거리를 0픽셀로 설정하는 바로가기입니다. 이렇게 하면 요소가 늘어나 전체 화면을 채웁니다.

• 크기 제한 :

– width 와 height 설정하여 요소의 크기를 정의합니다.

– max-width 및 max-height 사용하여 작은 화면에서 오버플로되지 않도록 하세요.

• 자동 여백이 있는 가운데 : – margin: auto; 요소를 중앙에 배치합니다. 주변의 추가 공간을 균등하게 나누어 중앙에 유지되도록 합니다.

예제 코드:

.요소 {

위치: 고정;

삽입: 0; /* 요소를 모든 가장자리에 고정 */

폭: 12rem; /* 고정 너비 설정 */

높이: 5rem; /* 고정 높이 설정 */

최대 너비: 100vw; /* 뷰포트 너비를 오버플로하지 않도록 합니다 */

최대 높이: 100dvh; /* 뷰포트 높이를 오버플로하지 않도록 합니다 */

여백: 자동; /* 요소를 중앙에 배치 */

}

2. 가로로만 중심 맞추기

요소를 수평으로만 중앙에 배치하려면(예: 하단의 쿠키 배너) 다음을 수행하십시오.

• 위치 고정:

– position: fixed; 요소를 제자리에 유지합니다.

• 가장자리에 앵커:

– left: 0; right: 0; 한 쪽에서 다른 쪽까지 수평으로 늘립니다.

– bottom: 8px; 아래쪽 가장자리부터 배치합니다.

• 제약 및 중심화:

– 고정 너비를 설정합니다.

– margin-inline: auto; 수평으로 중앙에 배치합니다.

예제 코드:

.element {

position: fixed;

left: 0;

right: 0;

bottom: 8px; /* Positions from the bottom edge */

width: 12rem; /* Sets a fixed width */

max-width: calc(100vw - 16px); /* Ensures it fits within the viewport with some buffer */

margin-inline: auto; /* Centers horizontally */

}

3. 크기를 알 수 없는 요소의 센터링

요소의 크기를 모르지만 중앙에 배치하려는 경우:

• Fit-Content 사용:

– width: fit-content; height: fit-content; 요소가 콘텐츠 주위로 줄어들도록 허용합니다.

• 센터링 적용:

– position: fixed; margin: auto; 중앙에 두도록 합니다.

예제 코드:

.element {

position: fixed;

inset: 0;

width: fit-content; /* Shrinks to fit content */

height: fit-content; /* Shrinks to fit content */

margin: auto; /* Centers the element */

}

이러한 방법을 사용하면 크기에 관계없이 요소를 뷰포트의 중앙에 쉽게 배치할 수 있습니다.

방법 4: CSS 그리드를 사용하여 DIV를 중앙에 배치하는 방법

CSS 그리드는 레이아웃 디자인을 위한 강력한 도구이며 특히 요소를 중앙에 배치하는 데 유용합니다. CSS 그리드를 사용하여 수평 및 수직으로 쉽게 중앙에 배치하는 방법은 다음과 같습니다.

1. 단일 요소 중심 맞추기

컨테이너 내에서 요소를 중앙에 배치하려면 CSS 그리드를 사용하여 간단한 설정을 사용할 수 있습니다.

• 그리드 표시 설정:

– display: grid; 컨테이너를 그리드로 바꿉니다.

• 장소 콘텐츠 사용:

– place-content: center; 콘텐츠를 가로 및 세로 중앙에 배치하는 바로가기입니다. justify-content (horizontal)와 align-content (vertical)를 모두 center 로 설정합니다.

예제 코드:

css

.컨테이너 {

디스플레이: 그리드;

장소 내용: 센터; /* 콘텐츠를 가로와 세로 모두 가운데에 배치합니다 */

}

이렇게 하면 요소가 크기에 관계없이 컨테이너 중앙에 바로 위치하게 됩니다.

2. Flexbox와의 차이점

CSS 그리드는 항목을 중앙에 배치할 수 있지만 Flexbox와 다르게 동작합니다.

– Flexbox: 크기 및 컨테이너 크기를 기준으로 항목을 중앙에 배치합니다.

– CSS 그리드: 그리드 셀 크기를 기준으로 항목을 중앙에 배치합니다. 이는 그리드 셀 크기가 정의되지 않은 경우 까다로울 수 있습니다.

백분율이 포함된 그리드의 예제 코드:

css

.컨테이너 {

디스플레이: 그리드;

장소 내용: 센터;

}

.요소 {

너비: 50%; /* 너비는 그리드 셀의 50%입니다 */

높이: 50%; /* 높이는 그리드 셀의 50%입니다 */

}

그리드 셀 크기를 지정하지 않으면 요소가 예상보다 작아질 수 있습니다. Flexbox는 기본 센터링에 있어서 더 간단한 경우가 많습니다.

3. 여러 요소를 중앙에 배치하기

CSS 그리드는 동일한 셀에 있는 여러 요소를 처리할 수도 있습니다.

• 동일한 셀에 여러 요소 할당:

– 동일한 그리드 셀에 항목을 배치하려면 grid-row 및 grid-column 사용하십시오.

• 셀 내 항목 중심:

– place-items: center; 그리드 셀 내에서 항목을 중앙에 배치합니다.

예제 코드:

css

.컨테이너 {

디스플레이: 그리드;

장소 내용: 센터; /* 그리드 셀을 중앙에 배치 */

장소 항목: 센터; /* 셀 내에서 항목을 가운데에 배치합니다 */

}

.요소 {

그리드 행: 1;

그리드 열: 1; /* 모든 요소는 동일한 셀에 배치됩니다 */

}

이 설정은 크기가 다른 여러 항목을 컨테이너 중앙에 쌓습니다.

핵심사항

– CSS 그리드는 복잡한 레이아웃과 배치에 대한 정확한 제어가 필요한 경우에 적합합니다.

– Flexbox는 일반적으로 간단한 센터링 작업에 더 간단합니다.

이러한 기본 사항을 사용하면 CSS 그리드를 사용하여 다양한 시나리오에서 단일 요소와 여러 요소를 모두 중앙에 배치할 수 있습니다.

방법 5: CSS에서 텍스트를 가운데에 맞추는 방법

텍스트를 가운데에 맞추는 것은 이미지나 div와 같은 다른 요소를 가운데에 맞추는 것과 약간 다릅니다. 이를 수행하는 간단한 방법은 다음과 같습니다.

텍스트 블록 중앙에 맞추기

컨테이너 내부의 텍스트 블록(예: div의 단락)을 중앙에 배치하려면 text-align 속성을 사용합니다. 이는 텍스트가 div , p 또는 h1 과 같은 블록 수준 요소 내에 있을 때 가장 잘 작동합니다.

수행 방법은 다음과 같습니다.

css

.컨테이너 {

텍스트 정렬: 가운데;

}

이 코드는 브라우저가 컨테이너 내부의 텍스트를 중앙에 배치하도록 지시합니다. 컨테이너 자체를 중앙에 배치하려면 Flexbox 또는 Grid를 사용하면 됩니다.

css

.컨테이너 {

디스플레이: 플렉스;

내용 정당화: 센터;

항목 정렬: 중앙;

높이: 100vh; /* 수직 센터링을 위해 컨테이너를 전체 높이로 만듭니다 */

}

Flexbox와 그리드는 어떻습니까?

Flexbox와 Grid는 전체 컨테이너를 중앙에 맞추는 데 적합하지만 해당 컨테이너 내의 텍스트를 중앙에 맞추지는 않습니다. Flexbox 또는 Grid를 사용하여 단락을 중앙에 배치하면 내부의 개별 줄이나 문자가 아닌 텍스트 블록이 중앙에 배치됩니다.

Flexbox를 사용하여 텍스트 가운데 맞춤

다음과 같이 Flexbox를 사용하여 단락을 중앙에 배치하는 경우:

css

.컨테이너 {

디스플레이: 플렉스;

내용 정당화: 센터;

항목 정렬: 중앙;

높이: 100vh;

}

컨테이너 내에서 전체 단락을 중앙에 배치합니다. 그러나 해당 단락 내에서 텍스트 자체를 가운데에 맞추려면 text-align: center; 도 필요합니다. .

미래의 CSS 기능

CSS에는 흥미로운 발전이 있습니다! 센터링을 더욱 쉽게 해주는 새로운 기능이 출시될 예정입니다. 지금은 text-align: center; 와 함께 Flexbox 또는 Grid를 사용합니다. 그것을 처리하는 가장 좋은 방법입니다.

이 간단한 접근 방식은 페이지의 어느 위치에 있든 텍스트를 보기 좋게 유지하고 중앙에 배치하는 데 도움이 됩니다!

그러나 위의 모든 방법을 고려하면 상황에 따라 어떤 방법이 가장 적합한지 혼란스러울 수 있습니다. 그렇다면 아래 결론을 확인해 보세요.

결론

이 블로그에서는 Flexbox 및 자동 여백과 같은 다양한 도구를 사용하여 DIV 요소를 가로, 세로 및 페이지 중앙에 가운데 배치하는 방법을 배웠습니다. 이러한 도구 각각에는 고유한 이점과 사용 시나리오가 있습니다. 도움을 드리기 위해 다음은 몇 가지 일반적인 사용 사례입니다.

• 자동 여백: 간단한 수평 중앙 정렬에 사용합니다.
• Flexbox: 항목을 양방향으로 중앙에 배치하고 항목의 행이나 열을 작업할 때 가장 적합합니다.
• 뷰포트 센터링: 화면 중앙에 맞춰야 하는 팝업이나 요소에 적합합니다.
• CSS 그리드: 복잡한 레이아웃에 적합하며 행과 열을 모두 중앙에 배치해야 하는 경우에 적합합니다.

이 게시물에 대해 문의 사항이나 의문 사항이 있는 경우 아래 댓글 섹션에 알려주시기 바랍니다.

라훌

Rahul Kumar는 웹 매니아이자 WordPress 및 웹 호스팅을 전문으로 하는 콘텐츠 전략가입니다. 수년간의 경험과 업계 동향에 대한 최신 정보를 얻으려는 노력을 통해 그는 트래픽을 유도하고 참여도를 높이며 전환율을 높이는 효과적인 온라인 전략을 수립합니다. 세부 사항에 대한 Rahul의 관심과 매력적인 콘텐츠 제작 능력은 그를 온라인 인지도를 향상시키려는 모든 브랜드에 귀중한 자산으로 만듭니다.