항목 센터링을 위한 3가지 최신 CSS 기술

예전에는 HTML과 CSS 로 항목을 중앙에 배치하는 것이 꽤 어려웠습니다. 글쎄요, 더 이상은 아닙니다. 지금은 다양한 방법이 있습니다. 다양한 시나리오에서는 다양한 옵션이 필요할 수 있으므로 이는 좋은 일입니다. 이 비디오에서는 제가 가장 좋아하는 항목을 중앙에 배치하는 세 가지 방법을 살펴보겠습니다. 위치 지정을 사용한 다음 Flexbox를 사용하고 마지막으로 CSS 그리드를 사용합니다.

좋아, 시작해 보자.

오랫동안 웹에서 단순히 항목을 컨테이너 중앙에 배치하는 것이 너무 어려웠다는 것은 정말 이상한 일입니다. 글쎄, 수평 센터링은 쉬웠지만 수직 센터링은 최근까지 거의 불가능했습니다.

CSS 위치 지정을 사용하여 항목 중심 맞추기

CSS 위치 지정을 사용하는 이 첫 번째 방법은 아마도 가장 오랫동안 사용되어 왔지만 새로운 속성이 등장하면서 조금씩 발전했습니다. 예를 살펴보겠습니다.

여기에 빨간색 테두리가 있는 다른 컨테이너의 중앙에 배치할 상자가 있습니다. 이는 강력한 요소이며 여기에 보이는 빨간색 상자인 div 요소 내에 직접 배치됩니다.

우리는 이 방법에 절대 위치 지정을 사용할 것이므로 strong 요소에 추가해 보겠습니다.

 strong { position: absolute; }

이제 이것이 올바르게 작동하려면 div 항목을 배치할 위치 지정 컨텍스트를 생성해야 합니다. 이를 수행하는 방법은 다양하지만 이 예에 가장 적합한 옵션은 상대 위치 지정을 사용하는 것입니다.

 div { position: relative; }

이제 요소를 div 높이의 50%, 너비의 50% 이상 아래에 배치할 수 있습니다. 위에서 아래로 위치를 지정하려면 값이 50%인 inset-block-start 새로운 논리 속성을 사용할 수 있습니다. 그리고 왼쪽부터 위치를 지정하려면 동일한 값인 50%로 inset-inline-start 사용할 수 있습니다.

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

좋아요, 정확히 중앙에 있지 않은 거죠, 그렇죠?

그 이유는 항목을 div 중앙에 배치했지만 위치는 왼쪽 상단을 기준으로 하기 때문입니다. 지금 해야 할 일은 항목을 높이의 50% 위로 이동하고 너비의 50% 이상 뒤로 이동하는 것입니다. 이렇게 하면 중앙에 올바르게 배치됩니다. 하지만 어떻게 할 수 있습니까?

사실 정말 쉽습니다. 새로운 CSS translate 속성을 사용할 수 있습니다. 첫 번째 값은 x축을 따라 변환됩니다. 50% 뒤로 돌아가야 하므로 음수 50% 값을 추가하겠습니다. 그리고 두 번째 값은 y축을 따라 변환되므로 음수 50%라는 동일한 값을 지정합니다.

 strong { ... translate: -50% -50%; } 

그리고 우리는 간다. 완벽하게 중앙에 위치합니다.

위치 지정 및 변환을 사용한 최종 작업 예제는 다음과 같습니다.

그래서 이것은 우리가 할 수 있는 한 가지 방법이지만 제가 가장 좋아하는 방법은 아닙니다.

Flexbox를 사용하여 항목 중앙에 배치

가능하다면 위치 지정보다 Flexbox를 사용하는 것이 더 쉽고 코드 줄도 적고 위치 지정 컨텍스트도 필요하지 않으며 솔직히 더 좋고 현대적인 솔루션처럼 느껴지기 때문에 Flexbox를 사용하는 것을 선호합니다. 예를 살펴보겠습니다.

좋습니다. 동일한 지점에서 시작합니다. 빨간색 테두리가 있는 외부 div와 내부의 Strong 요소가 있습니다.

div를 디스플레이, 플렉스가 포함된 플렉스 컨테이너로 만드는 것부터 시작합니다. 그런 다음 justify-content 속성과 center 값을 사용하여 항목을 x축을 따라 가운데에 정렬할 수 있습니다. 마지막으로 중요한 것은 align-items 속성과 동일한 center 값을 사용하여 y축을 따라 정렬할 수 있다는 것입니다.

 div { display: flex; justify-content: center; align-items: center; } 

그리고 거기에 항목이 적절하게 중앙에 배치되어 있으며 이번에는 거기에 도달하는 데 단 세 줄의 코드만 필요했습니다.

Flexbox를 사용한 최종 작업 예제는 다음과 같습니다.

멋지네요. 가끔 이렇게 해야 할 때도 있지만, 항목을 중앙에 배치하는 데 제가 가장 좋아하는 방법은 CSS 그리드를 사용하는 것입니다. 그리고 다시 말씀드리지만, 제가 이렇게 하는 이유는 flex 보다 훨씬 쉽고 코드가 더 적게 필요하기 때문입니다.

그리드를 사용하여 항목 중앙에 배치

좋아, 빨간색 상자와 내부 항목의 시작점은 동일합니다.

이번에는 div를 display 값이 grid 인 그리드 컨테이너로 만들겠습니다. 이제 여기서 멋진 점은 원하는 경우 Flexbox 예제에 사용한 것과 동일한 두 가지 속성을 사용할 수 있다는 것입니다. justify-content: center 및 align-items: center 추가할 수 있습니다. 그것은 똑같은 방식으로 작동합니다.

 div { display: grid; justify-content: center; align-items: center; }

좀 웃기지만 그리드가 작동하는 방식일 뿐이며 Flexbox와 동일한 상자 정렬 속성을 사용할 수 있습니다. 하지만 이대로 놔두면 그리드를 사용해도 전혀 이점이 없겠죠?

대신 우리가 할 수 있는 일은 이러한 정렬 속성을 제거하고 place-items 속성으로 바꾸는 것입니다. 그리고 우리는 이 속성에 center 값을 부여할 수 있습니다.

 div { display: grid; place-items: center; } 

자, 이제 CSS 두 줄로 줄였습니다.

CSS Grid를 사용한 최종 작업 예는 다음과 같습니다.

결론

앞서 말했듯이 예전보다 훨씬 쉬워진 것은 확실합니다. 그러나 이러한 모든 기술은 여전히 매우 관련성이 높으며 다양한 상황으로 인해 필요할 수 있으므로 만일의 경우에 대비해 모두 알아 두는 것이 좋습니다. 나는 확실히 최소한의 코드 CSS 그리드를 선호하며, 그것이 차선책인 Flexbox로 작동하지 않으면, 둘 다 작동하지 않으면 위치 지정을 시도하십시오.