4에서 div를 중앙에 배치하는 방법

div를 중앙에 두는 것은 소프트웨어 개발자, 특히 CSS를 포함한 프런트엔드 기술로 인해 종종 어려움을 겪는 백엔드 개발자 사이에서 오랫동안 밈이었습니다.

좋은 소식은 새로운 align-content CSS 속성 덕분에 마침내 어려움이 끝났다는 것입니다. 물론 이 속성은 수직 정렬만 처리합니다. 이에 대해서는 나중에 자세히 설명하겠습니다.

역사적으로 어떻게 이루어졌는가

align-content가 도입되기 전에는 일반적으로 수직 정렬을 위해 CSS Grid나 Flexbox를 사용해야 했습니다.

그리드 예시:

<div style="display: grid; align-content: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

플렉스박스 예시:

<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh;">
    Hello World!
</div>

justify-content 속성은 Grid와 Flexbox 모두에서 div 콘텐츠의 가로 정렬에 사용됩니다. 일반 div의 경우 다음과 같이 간단히 text-align을 사용할 수 있습니다.

<div style="text-align: center; height: 100vh;">
    Hello World!
</div>

2024년에는 어떻게 진행되나요?

align-content가 도입되면서 더 이상 각각 몇 가지 단점이 있는 Grid 및 Flexbox에 의존할 필요가 없습니다. 다음을 사용하면 동일한 결과를 더 깔끔하게 얻을 수 있습니다.

<div style="align-content: center; height: 100vh;">
    Hello World!
</div>

앞서 언급했듯이 이는 수직 정렬만 처리합니다. 가로 정렬의 경우에도 align-content와 함께 안정적인 text-align 속성을 사용할 수 있습니다.

<div style="align-content: center; text-align: center; height: 100vh;">
    Hello World!
</div>

지원되는 최소 브라우저 버전은 Chrome 123, Firefox 125, Safari 17.4입니다.

자원

• MDN 웹 문서: align-content
• 나만의 구축: CSS 수직 센터

주요 이미지 크레딧

• ChatGPT에서 생성된 추천 이미지

위 내용은 4에서 div를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!