CSS를 사용하여 모든 브라우저에서 div 요소를 수직 중앙에 배치하는 방법은 무엇입니까?

CSS를 사용하는 모든 브라우저에서 div 요소를 세로 중앙에 배치하려면 Flexbox를 사용하세요. CSS3는 일반적으로 Flexbox로 알려진 또 다른 레이아웃 모드인 유연한 상자를 제공합니다. 이 모드를 사용하면 복잡한 애플리케이션과 웹 페이지의 레이아웃을 쉽게 만들 수 있습니다. 부동 소수점과 달리 Flexbox 레이아웃은 상자의 방향, 정렬, 순서 및 크기를 완벽하게 제어할 수 있습니다.

태그는 HTML 요소의 컨테이너입니다. div 안에는 모든 유형의 콘텐츠를 배치할 수 있습니다. 요소를 추가하는 것으로 시작한 다음 CSS를 사용하여 스타일을 지정하세요. 이제 div를 수직으로만 중앙에 배치할 수 있지만 수평으로는 중앙에 배치할 수 있습니다.

div를 수직으로 중앙에 배치하기 위해 flex 속성인 align-items 속성을 사용합니다. div를 중앙에 배치하려면 값이 center로 설정됩니다. 아래 예에서는 중심 값 -

그런 다음 동일한 div 데모2의 콘텐츠를 중앙 정렬로 설정하세요. -

demo2 {
   display: flex;
   align-items: center;
   height: 60%;
} 

Example

이제 모든 브라우저에서 CSS를 사용하여 div 요소를 수직으로 중앙에 배치하는 예를 살펴보겠습니다. -

위 내용은 CSS를 사용하여 모든 브라우저에서 div 요소를 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!