CSS 그리드를 사용하여 DIV 중심을 중심으로하는 방법

수평 및 수직 중심을위한 5 가지 CSS 그리드 방법 이 기사는 수평 및 수직으로 DIV를 중심하기위한 5 가지 CSS 그리드 기술을 탐구합니다. 이 방법은 모든 HTML 요소에 적용됩니다. 우리는 또한 다른 곳에서 덮은 Flexbox 및 Transform Based Centering에 대해 간단히 다룰 것입니다. 키 테이크 아웃 :

CSS Grid는 DIV : , , , 자동 여백 및 그리드 영역을 중심으로하는 5 가지 효율적인 방법을 제공합니다.

개별 그리드 품목을 중심으로 다른 품목을 자유롭게 위치시킬 수 있습니다. (수평)과 (수직) 는 그리드 컨테이너에 적용되며, 모든 품목에 동일한 배치가 필요할 때 이상적입니다. 그것은 및

전체 그리드 컨테이너의 컨텐츠를 정렬하여 모든 항목을 단일 그룹으로 처리합니다. place-self와 place-items 자동 마진은 브라우저가 주변 공간을 계산하고 분배하여 그리드 셀 내에서 DIV를 중심으로합니다. place-content 설정 :

우리는 컨테이너와 간단한 상자 요소 (div)로 시작하여 데모로 시작합니다. HTML은 다음과 같습니다

및 초기 CSS : place-self justify-self align-self 모든 예제는

를 사용하여

요소를 그리드 컨테이너로 설정합니다. 컨테이너는 넓고 키가 큰 공간을 제공하기 위해 만들어졌습니다. place-items 중심 방법 : justify-items align-items

: place-content 이것은 셀 내의 그리드 항목을 쉽게 중심으로합니다. justify-content align-content [Codepen Demo : 그리드 및 장소를 사용한 센터링] (Codepen 링크)

는 및 의 속기입니다. Codepen 데모에서 이러한 개별 특성을 실험하십시오. 다른 사람들이 다르게 배치 될 수 있도록 개별 품목을 중심으로하는 것이 가장 좋습니다.

: 이것은 셀 내의 모든 그리드 항목을 중심으로합니다

[Codepen Demo : CSS 그리드 및 장소-항목이있는 요소 중심] (코드 펜 링크)

는 <code class="language-html"><article> <div></div> </article></code> 및 의 속기입니다. Codepen 데모에 더 많은 DIV를 추가하여 모든 중심을 확인하십시오.

<code class="language-css">article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}</code>

3. : 이것은 전체 그리드 컨텐츠를 그룹으로 중심으로합니다. place-content [Codepen Demo : CSS 그리드 및 장소 컨텐츠가있는 요소 중심] (Codepen에 대한 링크)
는 및 의 속기입니다. .

<code class="language-html"><article>
  <div></div>
</article></code>

자동 마진 :

이것은 센터링을 위해 자동 마진 계산을 사용합니다

[Codepen Demo : CSS 그리드 및 자동 여백이있는 요소 중심] (Codepen에 대한 링크) 이 간단한 기술을 사용하면 브라우저가 간격을 처리 할 수 ​​있습니다 place-content 그리드 영역 : 이 방법은 정확한 배치를 위해 멀티 로우/열 그리드를 사용합니다. justify-content align-content [Codepen Demo : CSS 그리드를 사용하여 DIV 중심] (CodePen 링크) space-around space-evenly 대안으로, 명명 된 그리드 영역을 사용하여 : center [Codepen Demo : 명명 된 영역을 사용하여 CSS 그리드가있는 DIV 중심] (CodePen 링크)

결론 :
모든 방법은 효과적으로 Div를 중심으로합니다. 및 자동 마진은 직접 요소 타겟팅에 편리합니다. 레이아웃 복잡성과 요구에 가장 적합한 방법을 선택하십시오. 이러한 기술은 divs 이외의 요소에서 작동합니다. 예제는 빈 DIV를 사용하지만 내용을 추가하면 센터링이 유지됩니다.
4. (FAQS 섹션은 크게 반복적이었고 질문 답변이 이미 기사에서 암시 적으로 다루어 졌기 때문에 제거되었습니다.)

위 내용은 CSS 그리드를 사용하여 DIV 중심을 중심으로하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!