팁/튜토리얼

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

2018.02.04 02:19
1,789
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. 13
# 라이믹스 스킨 제작은 어디? >>>> XE 레이아웃, 라이믹스 스킨제작은 이온디에서 커스터마이징해드립니다.
# 빠른 라이믹스 커뮤니티용 호스팅을 찾고 계신가요? >>>> 이온디호스팅 서비스는 PHP8 & Redis 서버 캐시를 활용하여 라이믹스에 최적화된 호스팅 서비스를 제공해드립니다. (서버세팅시 웹패널, 내도메인메일서비스도 함께 구축해드립니다.)
https://eond.com

댓글 2