[CSS] 레이어 팝업 중앙정렬

• target:  레이어 팝업을 브라우저 창 중앙에 고정(fixed)시켜서 스크롤을 하더라도 중앙 유지

 

---

• method: 

.popup{
    display: none; /*hide setting*/
  , position: fixed;
  , left: 50%;
  , top: 50%;
  , width: 500px; /*너비 설정*/
  , height: 300px; /*높이 설정*/
  , margin-left: -250px; /*-(width/2)*/
  , margin-top: -150px; /*-(height/2)*/
  , z-index:1000;
  
  /*style*/
  , background: white;
  , border: 1px solid #d1d8dd;
  , box-shadow: 0 0 6px 1px rgb(0 0 0 / 30%);
}

※ 너비 500px,  높이 300px 기준

※ style은 적용하지 않아도 무관, 취향에 따라서 상단으로 조금 올려서 적용하고 싶은 경우 maring-top을 좀 더 낮춰도 상관없음

   (원글에는 높이를 70%로 설정)

 

---

*추가

 - magnific popup의 경우, 창의 너비와 높이를 callback 함수 open 시점에 받아와서 css를 적용

// $.magnific popup의 경우 .mfp-content 부분에 적용
var regexp = /(\d+)px/;
var layerWidth = $('.mfp-content').css('width').replace(regexp, '$1');
var layerHeight = $('.mfp-content').css('height').replace(regexp, '$1');

// set align center layer popup
$('.mfp-content').css({
		position: 'fixed'
	,	left: '50%'
	,	top: '50%'
	,	width: layerWidth
	,	height: layerHeight
	,	marginLeft: -(layerWidth/2)
	,	marginTop: -(layerHeight/2)
});

 

---

• source:

https://earth-ing.tistory.com/50

[CSS] 레이어 팝업 중앙 정렬 +사용법