CSS에서 본문 내용을 중앙에 배치하는 방법

CSS에서 본문 콘텐츠를 중앙에 배치하는 방법: 1. HTML 페이지의 모든 요소를 ​​수평으로 중앙에 배치하려면 여백을 사용하여 여백을 "0 자동"으로 설정합니다. 2. div와 왼쪽 및 위쪽 테두리 사이의 거리를 설정합니다. 3. jQuery를 통해 수평 및 수직 센터링을 달성합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터.

권장: css 비디오 튜토리얼

페이지를 디자인할 때 DIV를 중앙에 배치하고 로그인 창을 중앙에 배치하는 등 페이지 창을 기준으로 수평 및 수직으로 표시해야 하는 경우가 많습니다. 우리의 전통적인 솔루션은 순수한 CSS를 사용하여 DIV를 중앙에 배치하는 것입니다. 이 기사에서는 CSS와 jQuery를 사용하여 DIV를 가로 및 세로로 중앙에 배치하는 방법을 설명합니다.

CSS는 DIV를 가로 중심으로 만듭니다

설명: 이 문서에서 언급된 DIV에는 HTML 페이지의 모든 요소가 포함됩니다.

DIV를 수평으로 중앙에 배치하려면 CSS를 사용하여 직접 수행할 수 있습니다. DIV의 너비를 설정한 다음 여백을 사용하여 여백을 0 자동으로 설정하면 CSS는 자동으로 왼쪽 및 오른쪽 여백을 계산하여 DIV를 중앙에 배치합니다.

.mydiv{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
}

하지만 DIV를 수직으로 중앙에 배치하려면 CSS를 수정해야 합니다

CSS를 수평 및 수직 중앙에 배치해야 합니다

DIV를 수평 및 수직으로 중앙에 배치하려면 너비를 알아야 합니다. 절대 위치의 경우 페이지 창의 왼쪽 테두리와 위쪽 테두리로부터의 거리를 50%로 설정합니다. 이 50%는 페이지 너비와 높이의 50%를 나타냅니다. 마지막으로 DIV는 왼쪽과 위쪽, 왼쪽과 위쪽으로 각각 이동합니다. 크기는 DIV 너비와 높이의 절반입니다.

.mydiv{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
}

이 방법은 흔히 사용되는 방법이지만 DIV의 너비와 높이를 설정해야 한다는 전제가 있습니다. 예를 들어 페이지의 DIV 너비와 높이가 동적인 경우 DIV 레이어가 팝업되어 중앙에 표시되어야 하며 DIV의 콘텐츠는 동적이므로 이 경우 너비와 높이도 동적입니다. jQuery를 사용하여 센터링 문제를 해결할 수 있습니다.

jQuery는 수평 및 수직 센터링을 구현합니다

jQuery의 수평 및 수직 센터링을 구현하는 원리는 jQuery를 통해 DIV의 CSS를 설정하고 DIV의 왼쪽 및 위쪽 여백 오프셋을 얻는 것입니다. 페이지 창의 너비를 DIV의 너비에서 빼고 결과 값을 왼쪽 오프셋인 2로 나눕니다. 오른쪽 오프셋에 대한 알고리즘은 동일합니다. 참고로 DIV의 CSS 설정은 resize() 메소드에서 완료해야 합니다. 즉, 창 크기가 변경될 때마다 DIV의 CSS 설정이 실행되어야 합니다.

$(window).resize(function(){ 
    $(".mydiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });        
});

추가로. , 페이지가 로드되면 resize()를 호출해야 합니다.

$(function(){ 
    $(window).resize(); 
});

이 방법의 장점은 DIV의 특정 너비와 높이를 알 필요가 없다는 것입니다. jQuery를 사용하여 수평 및 수직 센터링을 직접 구현할 수 있으며 다양한 브라우저와 호환됩니다. 많은 팝업 레이어 효과에서.

ps: div 너비가 페이지 너비보다 큰 경우 본문에 CSS를 추가해야 합니다

<style type="TEXT/CSS">
body{width:100%; overflow:hidden}
</style>

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