HTML/CSS 팝업레이어 브라우저 중앙에 띄우기

HTML/CSS 팝업레이어 브라우저 정중앙에 띄우는 방법

POPUP LAYER 를 브라우저 가로 세로 정가운데에 중간정렬해서 표시하는 방법입니다.

<style>

#popupLayer {

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin-left:-100px;

margin-top:-150px;

border:3px double #FF0000;

background-color:#FFFF00;

}

</style>

<div id="popupLayer">

팝업 정중앙에 띄우기 예제

</div>

left: 50%; top: 50%;

그리고

DIV 가로폭과 세로높이의 1/2 의 값을 margin-left 와 margin-top 에 마이너스를 붙여서 넣어주면 됩니다.

팝업 정중앙에 띄우기 예제