예전에는   로 항목을 중앙에 배치하는 것이 꽤 어려웠습니다. 글쎄요, 더 이상은 아닙니다. 지금은 다양한 방법이 있습니다. 다양한 시나리오에서는 다양한 옵션이 필요할 수 있으므로 이는 좋은 일입니다. 이 비디오에서는 제가 가장 좋아하는 항목을 중앙에 배치하는 세 가지 방법을 살펴보겠습니다. 위치 지정을 사용한 다음 Flexbox를 사용하고 마지막으로 CSS 그리드를 사용합니다. HTML과 CSS  좋아, 시작해 보자.   https://youtu.be/XMH4c1xIZtE?embedable=true  오랫동안 웹에서 단순히 항목을 컨테이너 중앙에 배치하는 것이 너무 어려웠다는 것은 정말 이상한 일입니다. 글쎄, 수평 센터링은 쉬웠지만 수직 센터링은 최근까지 거의 불가능했습니다.  CSS 위치 지정을 사용하여 항목 중심 맞추기  CSS 위치 지정을 사용하는 이 첫 번째 방법은 아마도 가장 오랫동안 사용되어 왔지만 새로운 속성이 등장하면서 조금씩 발전했습니다. 예를 살펴보겠습니다.  여기에 빨간색 테두리가 있는 다른 컨테이너의 중앙에 배치할 상자가 있습니다. 이는 강력한 요소이며 여기에 보이는 빨간색 상자인   요소 내에 직접 배치됩니다.  div  우리는 이 방법에 절대 위치 지정을 사용할 것이므로   요소에 추가해 보겠습니다. strong   strong { position: absolute; }  이제 이것이 올바르게 작동하려면   항목을 배치할 위치 지정 컨텍스트를 생성해야 합니다. 이를 수행하는 방법은 다양하지만 이 예에 가장 적합한 옵션은 상대 위치 지정을 사용하는 것입니다. div   div { position: relative; }  이제 요소를   높이의 50%, 너비의 50% 이상 아래에 배치할 수 있습니다. 위에서 아래로 위치를 지정하려면 값이 50%인   새로운 논리 속성을 사용할 수 있습니다. 그리고 왼쪽부터 위치를 지정하려면 동일한 값인 50%로   사용할 수 있습니다. div inset-block-start inset-inline-start     strong { ... inset-block-start: 50%; inset-inline-start: 50%; }  좋아요, 정확히 중앙에 있지 않은 거죠, 그렇죠?  그 이유는 항목을   중앙에 배치했지만 위치는 왼쪽 상단을 기준으로 하기 때문입니다. 지금 해야 할 일은 항목을 높이의 50% 위로 이동하고 너비의 50% 이상 뒤로 이동하는 것입니다. 이렇게 하면 중앙에 올바르게 배치됩니다. 하지만 어떻게 할 수 있습니까? div  사실 정말 쉽습니다. 새로운 CSS   속성을 사용할 수 있습니다. 첫 번째 값은 x축을 따라 변환됩니다. 50% 뒤로 돌아가야 하므로 음수 50% 값을 추가하겠습니다. 그리고 두 번째 값은 y축을 따라 변환되므로 음수 50%라는 동일한 값을 지정합니다. translate     strong { ... translate: -50% -50%; }  그리고 우리는 간다. 완벽하게 중앙에 위치합니다.  위치 지정 및 변환을 사용한 최종 작업 예제는 다음과 같습니다.   https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true  그래서 이것은 우리가 할 수 있는 한 가지 방법이지만 제가 가장 좋아하는 방법은 아닙니다.  Flexbox를 사용하여 항목 중앙에 배치  가능하다면 위치 지정보다 Flexbox를 사용하는 것이 더 쉽고 코드 줄도 적고 위치 지정 컨텍스트도 필요하지 않으며 솔직히 더 좋고 현대적인 솔루션처럼 느껴지기 때문에 Flexbox를 사용하는 것을 선호합니다. 예를 살펴보겠습니다.  좋습니다. 동일한 지점에서 시작합니다. 빨간색 테두리가 있는 외부 div와 내부의 Strong 요소가 있습니다.   div를 디스플레이, 플렉스가 포함된 플렉스 컨테이너로 만드는 것부터 시작합니다. 그런 다음   속성과 center 값을 사용하여 항목을 x축을 따라 가운데에 정렬할 수 있습니다. 마지막으로 중요한 것은   속성과 동일한 center 값을 사용하여 y축을 따라 정렬할 수 있다는 것입니다. justify-content align-items     div { display: flex; justify-content: center; align-items: center; }  그리고 거기에 항목이 적절하게 중앙에 배치되어 있으며 이번에는 거기에 도달하는 데 단 세 줄의 코드만 필요했습니다.  Flexbox를 사용한 최종 작업 예제는 다음과 같습니다.   https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true  멋지네요. 가끔 이렇게 해야 할 때도 있지만, 항목을 중앙에 배치하는 데 제가 가장 좋아하는 방법은 CSS 그리드를 사용하는 것입니다. 그리고 다시 말씀드리지만, 제가 이렇게 하는 이유는   보다 훨씬 쉽고 코드가 더 적게 필요하기 때문입니다. flex  그리드를 사용하여 항목 중앙에 배치  좋아, 빨간색 상자와 내부 항목의 시작점은 동일합니다.   이번에는 div를   값이   인 그리드 컨테이너로 만들겠습니다. 이제 여기서 멋진 점은 원하는 경우 Flexbox 예제에 사용한 것과 동일한 두 가지 속성을 사용할 수 있다는 것입니다.   및   추가할 수 있습니다. 그것은 똑같은 방식으로 작동합니다. display grid 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를 사용한 최종 작업 예는 다음과 같습니다.   https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true  결론  앞서 말했듯이 예전보다 훨씬 쉬워진 것은 확실합니다. 그러나 이러한 모든 기술은 여전히 매우 관련성이 높으며 다양한 상황으로 인해 필요할 수 있으므로 만일의 경우에 대비해 모두 알아 두는 것이 좋습니다. 나는 확실히 최소한의 코드 CSS 그리드를 선호하며, 그것이 차선책인 Flexbox로 작동하지 않으면, 둘 다 작동하지 않으면 위치 지정을 시도하십시오.    게시되었습니다. 여기에도

Buy Me a Coffee

이 오디오는 이야기의 원래 언어로 제작되었습니다!

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

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

텔레그램: 크립토 아일랜드에서 본토로 연결되는 다리

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

성공적인 클라우드 마이그레이션을 위한 전체 가이드: 전략 및 모범 사례

텔레그램: 크립토 아일랜드에서 본토로 연결되는 다리

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

바다 항해: 데이터 레이크를 사용하여 프로덕션 등급 RAG 애플리케이션 개발

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps