div 상대 화면 가운데 맞춤

div 상대 화면 가운데 맞춤
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
고구마 눈부신 2014년 7월 21일 10:20:28 월요일
 
원리는 간단하다. 주로 다음과 같은 세 가지를 기억한다.
 
첫 번째 요구 사항:position:absolute
두 번째 요구:left:50%;top:50%
세 번째 요구 사항: Margin-left:-175px [즉-(350/2)] Margin-top:-150px [즉-(300/2)]
 
원리:
먼저 이 DIV를 절대적으로 포지셔닝하기;
상단 50%, 왼쪽 50% 거리 두기;이 DIV의 왼쪽 상단에 있는 점이 바로 창의 한가운데입니다.
이 DIV의 높이와 넓이를 이미 알았기 때문에, 여기서 왼쪽으로 총 넓이와 높이의 반을 이동하면 된다.
 
예:

 

<style type="text/css">   
<!--   
div {   
position: absolute;      /*    */   
top: 50%;                  /*    50%*/   
left: 50%;                  /*    50%*/   
height: 200px;  margin-top: -100px;   /*margin-top height     */   
width: 400px;  margin-left: -200px;    /*margin-left width     */   
}   
-->   
</style> 

 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
고구마 눈부신 2014년 7월 21일 10:20:28 월요일