팁/튜토리얼

팝업 레이어 항상 가운데 띄우기(css flex center ie)

2018.02.04 02:19
1,779
1

xetown의 로그인창을 띄워서 익스플로러나 브라우저의 크기를 줄였다 늘렸다 해보세요.

항상 가운데 위치해있죠?

이걸 알려드리겠습니다.

 

 

방법은 부모레이어와 자식레이어가 필요합니다.

 

1) 부모레이어에 속성을

display:flex로 지정합니다.

 

2) 자식레이어에 속성을

min-height: 100vh;
    align-items: center;
    display:flex;
justify-content: center;
    flex-direction: column;

이렇게 지정해줍니다.

 

최종 소스는 이걸 참조하시면 되구요

https://codepen.io/chriswrightdesign/pen/emQNGZ

 

css의 flex 속성은 익스11에서만 가능하지 싶은데요.

구글검색 : css flex center ie

https://www.w3schools.com/cssref/css3_pr_flex.asp

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

여기에서 좀 더 알아보실 수 있습니다.

eond Lv. 12

댓글 2