place-content: center; 가운데 정렬

 

place-content: center;는 CSS의 place-content 속성을 사용하여 컨테이너 내에서 콘텐츠를 중앙 정렬하는 방법입니다. place-content는 align-content와 justify-content를 한 번에 설정할 수 있는 단축 속성입니다.

 

place-content: center;란?

place-content 속성은 CSS Grid 레이아웃에서 사용되며, 그리드 컨테이너 안에서 콘텐츠를 정렬하는 역할을 합니다.
이 속성은 두 개의 값을 가지는데, 첫 번째 값은 align-content(세로 정렬), 두 번째 값은 justify-content(가로 정렬)와 동일한 역할을 합니다.

place-content: center;의 의미

display: flex;

place-content: center;

위 코드는 다음과 동일합니다.

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

즉, 그리드 콘텐츠를 수직과 수평 모두 중앙으로 정렬하는 역할을 합니다.

 

 

 

• place-content: center;는 CSS Grid에서 사용되며, 2017년 이후 대부분의 최신 브라우저에서 지원됩니다.
• IE에서는 지원되지 않으므로, 크로스브라우징을 고려해야 합니다.
• IE 지원이 필요하다면 align-content + justify-content 또는 flexbox를 활용하는 것이 좋습니다.