CSS에서 세로 및 가로로 텍스트 가운데 맞춤

안녕하세요 여러분 👋

오늘 저는 CSS에서 텍스트를 세로 및 가로로 중앙에 배치하는 방법을 여러분과 공유하고 싶었습니다. CSS Flexbox Layout(Flexible Box) 및 CSS Grid Layout을 사용하여 이를 달성하는 세 가지 방법을 살펴보겠습니다. 또한 마지막으로 텍스트를 세로 및 가로로 중앙에 배치하는 가장 쉬운 방법을 보여 드리겠습니다.

1. CSS 플렉스박스 사용하기

이 3줄의 코드만으로 CSS Flexbox를 사용하여 텍스트를 중앙에 배치할 수 있습니다.

display: flex;
align-items: center;
justify-content: center;

데모:

2. CSS 그리드 사용(방법 #1)

이 3줄의 코드만으로 CSS Grid를 사용하여 텍스트를 중앙에 배치할 수 있습니다.

display: grid;
justify-content: center;
align-content: center;

데모:

3. CSS 그리드 사용(방법 #2) - 가장 쉬운 방법

이제 CSS Grid(방법 #2)를 사용할 때 텍스트를 세로 및 가로로 중앙에 배치하는 가장 쉬운 방법은 단 2줄의 코드를 사용하는 것입니다.

display: grid;
place-content: center;

데모:

질문

1. 다음을 사용하여 이 작업을 수행할 수도 있습니다.

display: grid;
place-items: center;

그렇다면 place-items와 place-content의 차이점은 무엇입니까?

A: 예, 맞습니다. 하지만 place-items: center는 이 데모에서 볼 수 있듯이 요소 내부에 간단한 텍스트나 텍스트가 있는 테스트 사례 #1 및 #2에서만 작동합니다.



그러나 다음과 같은 여러 요소 안에 텍스트가 있는 경우:

<div class="container2 items">
  <span>Lorem</span>
  <span>Lorem</span>
  <span>Lorem</span>
</div>

그런 다음 이 경우place-items:center는 아래 이미지에서 볼 수 있듯이 컨테이너 대신 각 그리드 행 내부의 텍스트 및 요소를 실제로 중앙에 배치합니다.



Btw, 저는 이 이미지에 Firefox DevTools CSS Grid Inspector를 사용하고 있습니다.

그러나 place-content: center 를 사용하면 아래에서 볼 수 있듯이 그리드 항목이 정렬 컨테이너의 중심을 향해 서로 같은 높이로 채워집니다.



이것이 우리가 실제로 찾고 있는 결과이므로 place-content: center;를 대신 사용했습니다. 말이 되기를 바랍니다.

또한 확인하려는 경우 코드 데모가 있습니다.




비디오 시청을 선호하는 경우 모든 요점이 자세히 설명되어 있는 이 비디오를 확인하십시오.



Center Text Vertically and Horizontally in CSS

데모

Github Pages

암호

CSS Demos

마무리

이 비디오가 유용하고 그 과정에서 새로운 것을 배우기를 바랍니다. HTML, CSS, JavaScript 및 웹 개발 팁과 요령을 더 배우고 싶다면 .

행복한 코딩!