div 가운데정렬 div center

아래의.. 방법1,2 모두 동일한 결과물이 출력되며 사용 용도에 알맞는 것으로 사용하시면 됩니다.

 

 

* 가로사이즈가 500이라면 margin-left 의 값에는 500÷2= 250 을 입력합니다.     (만약 가로가 800이라면 400을 입력하시면 되겠죠)

방법1)   <div style="position:absolute; width:500px; height:300px; left:50%; margin-left:-250px; background-color:#FF3333;"> 내용 </div>

방법2)   <div style="position:absolute; left:50%; margin-left:-250px;"> <table width="500" height="300" bgcolor="#FF3333" cellpadding="0" cellspacing="0"> <tr> <td>내용</td> </tr> </table> </div>

 

 

만약 상하좌우 전체 가운데 정렬을 사용할 경우 아래의 소스를 사용하시면 됩니다.

 

 

* 위와 마찬가지로 세로사이즈도 ÷2 값을 margin-top 에 넣어주세요.

방법1)   <div style="position:absolute; width:500px; height:300px; top:50%; left:50%; margin-top:-150px; margin-left:-250px; background- color:#FF3333;"> 내용 </div>

방법2)   <div style="position:absolute; top:50%; left:50%; margin-top:-150px; margin-left:-250px;"> <table width="500" height="300" bgcolor="#FF3333" cellpadding="0" cellspacing="0"> <tr> <td>내용</td> </tr> </table> </div>