맛집 여행 캠핑 일상 생활

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

HTML.CSS

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

영은파더♥ 2016. 5. 11. 16:37

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 에 마이너스를 붙여서 넣어주면 됩니다.



팝업 정중앙에 띄우기 예제


Trackback : | Comments :