CSS에서 센터링에 대한 실용적인 가이드

유용한 CSS 트릭 기사를 게시한 후 CSS 수학 함수에 대한 소개에서 간단히 언급했듯이 "CSS를 중앙에 배치하는 방법"과 같은 키워드로 트래픽이 이 사이트로 들어오는 것을 보았습니다. 그래서 마침내 내가 그런 기사를 직접 만들었다는 것이 의미가 있습니다.

CSS를 사용하여 물건을 중앙에 배치하는 문제는 justify-content: center; 재산. 다른 레이아웃 구조에는 고유한 규칙이 있고 특정 접근 방식을 존중 하지 않을 수 있다는 사실과 더 관련이 있습니다.

그러나 먼저 이 가이드가 누구를 위해 만들어졌는지 먼저 살펴보세요.

• CSS의 "규칙과 규정"에 압도당하는 프론트엔드 개발자.
• 해당 div를 한 번에 중심에 두는 것이 어렵다고 생각하는 사람. 아아아아!!
• 잘못 구성된 템플릿/테마에 집착하는 웹사이트 소유자.

CSS에서 센터링은 종종 수직, 수평 또는 수직 및 수평이라고 합니다.

왼쪽, 오른쪽, 왼쪽 및 오른쪽으로 해석할 수도 있습니다. 그리고 어떤 경우에는 Top & Bottom이라고 하는 것을 볼 수도 있습니다. 이 가이드 전체에서 사용하는 용어이기도 합니다. 즉, 가장 많이 찾는 접근 방식부터 시작하겠습니다.

인라인 및 블록 요소: 텍스트 정렬

처음에는 명확하지 않아 보일 수 있는 것 중 하나는 text-align: center; 단락 이상에서 작동합니다. 속성으로 블록으로 간주되는 모든 요소에 적용할 수 있습니다. 즉, 콘텐츠가 <div> 또는 유사한 요소로 래핑되어 있는 한 text-align 을 사용하여 가운데에 맞출 수 있습니다.

CSS 및 HTML

 <style> .text-align-container { display: flex; } .text-align-container-style .item { background: #fff2ea; padding: 20px 0; text-align: center; width: 100%; } </style> <div class="text-align-container text-align-container-style"> <div class="item">Hi, I am centered.</div> </div>

이 접근 방식의 좋은 점은 Grid와 Flexbox 모두에서 작동한다는 것입니다. div 안에 콘텐츠를 래핑하는 한 이미지와 같은 콘텐츠에 대해 제대로 작동합니다.

목록에서도 잘 작동합니다.

먼저 블록 컨테이너에 래핑하지 않고 <span> 요소를 가운데에 맞추려고 하면 어떤 일이 발생하는지 봅시다.

CSS 및 HTML

 .span-demo-container { background: #fff2ea; padding: 20px 0; width: 100%; } .span-demo-center { text-align: center; } <div class="span-demo-container"> <span class="span-demo-center">Am I in the center?</span> </div>

결과는 다음과 같습니다.

이 <span> 요소가 가운데에 있지 않은 이유는 인라인 요소이기 때문입니다. 인라인 요소의 경우 항상 부모 를 설정하려고 합니다.

따라서 다시 돌아가서 span-demo-center 클래스를 사용하여 <div> 에 적용하면 결과는 다음과 같습니다.

대규모 코드베이스로 작업하거나 구조가 좋지 않은 템플릿을 사용하는 경우 일반적으로 이것이 센터링이 작동하지 않는 가장 큰 이유입니다. 따라서 항상 블록 및 인라인 요소를 확인하고 올바르게 중첩되었는지 확인하십시오.

너비가 고정된 블록 요소 중심 맞추기

요소를 중앙에 배치하는 또 다른 인기 있는 방법은 margin: auto; , 고정 너비의 블록 요소에 가장 일반적으로 사용됩니다.

따라서 더 큰 컨테이너 내부의 사용자 지정 div를 생각하십시오. 그런 다음 해당 사용자 정의 div 요소 안에 콘텐츠를 넣고 중앙에 배치하려고 합니다.

실제 사례를 살펴보고 다음과 같이 실행해 보겠습니다.

CSS 및 HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner { width: 200px; padding: 1rem; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <div class="margin-auto-inner">Div & Text centered.</div> </div>

이 예제에서 margin-auto-container 클래스는 이 블로그 게시물에서 컨테이너를 가져온 다음 margin-auto-inner 라는 새 클래스를 만들고 사용자 지정 스타일로 고정 너비를 적용합니다. 마지막으로 margin: 0 auto; 내부 컨테이너가 주 컨테이너를 기준으로 중앙에 유지되도록 합니다.

 왜 0인가? 수직(상단 및 하단) 여백을 그대로 두고 수평(오른쪽 및 왼쪽) 보기에 자동 여백을 적용하고 싶기 때문에 0을 추가합니다. "margin: 25px auto 50px;"와 같은 개별 여백을 지정하도록 변경할 수 있습니다. 상단에 25px 여백, 하단에 50px 여백이 남습니다.

중요: 여백이 생기는 이유: auto; 중심에 맞추려는 요소에 고정 너비를 설정하지 않았기 때문입니다.

또한 text-align: center; 이것은 내부 컨테이너 내부의 텍스트를 중앙에 배치할 것이기 때문입니다.

고정 너비로 ​​인라인 요소 중심 맞추기

인라인 요소의 경우 사용자 정의 너비는 무시됩니다.

데모를 살펴보겠습니다.

CSS 및 HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner-span { width: 150px; padding: 5px; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <span class="margin-auto-inner-span">Inline <span> element with custom width. (Not centered).</span> </div>

결과는 다음과 같습니다.

보시다시피 margin: auto; span 인라인 요소가 가운데에 있지 않습니다.

다행히도 이를 쉽게 해결할 수 있습니다. display: block; 속성을 margin-auto-inner-span 클래스에 추가 – 특정 요소가 블록 으로 처리되기를 원한다고 브라우저에 알릴 수 있습니다. 이제 중앙에 위치해야 합니다.

이 시점에서 어떤 HTML 요소가 Blocks 로 간주되고 어떤 HTML 요소가 Inline 으로 간주되는지 궁금할 것입니다. 이해할 수 있는. MDN 참조를 살펴보는 것이 좋습니다.

• 블록 수준 요소
• 인라인 요소

인라인과 블록의 차이점을 알면 문제에 적합한 센터링 솔루션을 훨씬 쉽게 찾을 수 있습니다.

Grid & Flexbox: 현대적인 방식

Grid와 Flexbox는 현대 웹 디자인에 사용되는 두 가지 레이아웃 모듈입니다. Flexbox가 1차원 레이아웃 시스템인 반면 Grid는 2차원 접근 방식을 기반으로 합니다.

그리고 두 레이아웃의 div를 중앙에 배치하는 것은 단 두 줄의 코드로 수행할 수 있습니다.

수직 및 수평: 범용 솔루션

Grid 및 Flexbox 레이아웃 모두에 대해 place-content: center; 재산.

CSS 및 HTML

 .center-div-grid-layout { display: grid; /* display: flex; */ place-content: center; } <div class="center-div-grid-layout">It's that easy.</div>

place-content 속성은 align-content 및 justify-content 의 약어입니다.

place-content 를 사용하면 작업 중인 레이아웃 스타일에 따라 다양한 배치 변형을 수행할 수 있습니다.

전체 참조는 이 MDN 페이지를 참조하십시오.

전반적으로, 윤곽이 표시된 센터링 기술이 충분하지 않은 극소수의 경우가 있습니다. 고대 레이아웃으로 작업하는 경우 가장 좋은 방법은 스타일시트 자체 내에서 클래스 이름의 불일치를 찾는 것입니다. 그런 다음 지정된 센터링 논리가 제대로 실행되도록 요소를 적절하게 중첩하는 방법을 찾습니다.

절대 센터링: 변환

transform 속성은 수평 및 수직(왼쪽, 오른쪽, 위쪽, 아래쪽)과 같이 "정중앙에 있는" 중앙에 무언가를 배치하려는 경우에 사용됩니다.

CSS 및 HTML

 .transform-example-container { height: 150px; position: relative; background: #fff2ea; } .transform-example-container .transform-absolute { width: 300px; text-align: center; background: #efba93; color: #fff; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin: 0; padding: 10px 0; position: absolute; } <div class="transform-example-container"> <p class="transform-absolute">Example: CSS transform</p> </div>

이것은 중앙에 배치하려는 자식 요소의 위치 를 ​​절대 위치로 설정하여 작동합니다.

부모 요소가 상대 위치를 갖는 것이 중요합니다. 그렇지 않으면 transform 속성이 기본 레이아웃을 부모로 사용합니다.

top 과 left 를 사용하여 왼쪽 상단 모서리에 상대적인 위치를 설정합니다. 그런 다음 translate() 를 사용하여 요소를 중앙으로 가져올 수 있습니다.

여백 과 패딩 은 0 으로 설정해야 합니다. 그렇지 않으면 위치 이동이 발생합니다.

이것으로 튜토리얼/참조를 마칩니다. CSS로 센터링을 마스터하고 싶다면 좋아하는 코드 편집기를 실행하고 이 예제를 테스트에 적용하십시오.