Pure CSS : Layer-popup Auto center box #1

레이어팝업을 CSS만으로 자동 중앙 정렬하기

이번 글에서는 CSS 만으로 레이어팝업 콘텐츠를 가로,세로 중앙정렬하는 방법에 대해 알아봅니다.

일반적으로 레이어팝업을 중앙정렬 시키는 방법은 팝업 콘텐츠에 고정(fixed) 또는 절대(absolute) 위치를 정의하고 left: 50%; top:50%; 를 선언한 후 팝업 콘텐츠 너비,높이값에 따라 스크립트로 너비, 높이의 1/2 값을 margin-left, margin-top 에 음수값으로 정해주는 방법을 많이 사용합니다.

하지만 여기서는 스크립트 제어가 필요없이 그리고 레이어 콘텐츠 너비,높이에 상관없이 중앙 정렬시키는 방법에 대해 알아보도록 하겠습니다.

Pure CSS - layer Center Box

간단하게 레이아웃을 구성하고 레이어팝업에 대한 마크업이 다음과 같이 있다고 가정하겠습니다.

html

<div id="wrap">
    <p>#wrap</p>
    <!-- Start : header -->
    <div id="header">
        <p>#header</p>
    </div>
    <!-- End : header -->
    <!-- container -->
    <div id="container">
        <p>#container</p>
        <!-- snb -->
        <div class="snb">
            <p>.snb</p>
        </div>
        <!-- // snb -->
        <!-- Start : content -->
        <div id="content">
            <p>#content</p><br>
            <div>
                Lorem ipsum dolor sit amet,etur adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit tetur adipisicing elit. udiandae? <br>
                Lorem ipsum dolor sit tetur adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit amr adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit ng elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit amet, consectetpisicing elit. Ipsa, repudiandae? <br>
                Lorem ipsum dolor sit adae? <br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br><br>
                <a href="#layer" class="btn-layer">레이어 팝업보기</a>
            </div>
        </div>
        <!-- End : content -->
    </div>
    <!-- // container -->
    <!-- Start : footer -->
    <div id="footer">
        <p>#footer</p>
    </div>
    <!-- End : footer -->
</div>

<!-- Start : layer-popup content -->
<div id="layer" class="layer-wrap">
    <div class="pop-layer">
        <div class="pop-container">
            <div class="pop-conts">
                <!--content //-->
                <p class="ctxt mb20">
                    Thank you.<br> 
                    Your registration was submitted successfully.<br> 
                    Selected invitees will be notified by e-mail on JANUARY 24th.<br><br> 
                    Hope to see you soon!
                </p>
                <div class="btn-r">
                    <a href="#" class="btn-layerClose">Close</a>
                </div>
                <!--// content-->
            </div>
        </div>
    </div>
</div>
<!-- End : layer-popup content -->

테스트를 위해 간단한 레이아웃 마크업을 진행했으며 레이아웃용 CSS 는 다음과 같이 구성되어 있습니다.

css

* {
    margin: 0;
    padding: 0;
}    
/* Define Layout */
#wrap {
    width: 900px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #bdbdbd;
    background-color: #f7f7f7;
}
#wrap p {
    font-weight: bold;
}
#header,
#container,
#footer {
    padding: 15px;
    background-color: #e5e5e5;
    border: 1px solid #bfbfbf;
    margin-bottom: 10px;
    color: #2d2d2d;
    font-family:Tahoma;
    font-size: 14px;
}
#header {
    padding: 10px;
    margin-top: 10px;
}
#container:before,
#container:after {
    display: table;
    content:""
}
#container:after {
    clear: both;
}
.snb, #content {
    margin-top: 10px;
    background-color: #fff;
    border: 1px solid #bdbdbd;
    text-align: center;
}
.snb {
    float: left;
    width: 220px;
    height: 400px;
}
#content {
    float: right;
    width: 620px;
    padding: 0 10px 10px 10px;
    text-align: left;
    height: 800px;
}

Pure CSS : Layer-popup

css

/**
 * ==========================================================+
 * Layer-popup Center Box - http://http://webclub.tistory.com
 * Copyright © 2016 Jae Hee Kim 
 * All rights reserved.
 * ==========================================================+
 */

.layer-wrap {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}
.layer-wrap:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}
.pop-layer {
    display: inline-block;
    vertical-align: middle;
    width: 500px;
    height: auto;
    background-color: #fff;
    border: 5px solid #3571B5;
    z-index: 10;
    font-family:Tahoma;
}
.pop-layer .pop-container {
    padding: 20px 25px;
}
.pop-layer .btn-r {
    width: 100%;
    margin: 10px 0 20px;
    padding-top: 10px;
    border-top: 1px solid #DDD;
    text-align: right;
}
a.btn-layerClose {
    display: inline-block;
    height: 25px;
    padding: 0 14px 0;
    border: 1px solid #304a8a;
    background-color: #3f5a9d;
    font-size: 13px;
    color: #fff;
    line-height: 25px;
}

위의 레이어 팝업 콘텐츠에서 위치를 고정(fixed) 위치를 선언하고 html, body 기준으로 해당 콘텐츠 요소가 꽉 차도록 오프셋 값을 모두 0으로 정의합니다.

프로젝트 상황에 따라 고정위치는 절대위치로 변경하여 사용하셔도 상관없습니다.

그리고 자식요소를 중앙정렬하기 위해 text-align: center; 를 선언합니다.

해당 레이어 팝업이 html, body 요소를 기준으로 해당 콘텐츠는 너비,높이를 확보하게 됩니다.

그리고 가상요소를 이용하여 display: inline-block; height:100%; vertical-align: middle; 을 선언합니다.

그 외의 가상요소에서의 스타일링은 숙지하고 있는 가정하에 계속 설명하도록 하겠습니다.

가상 요소에 인라인 블록을 선언함으로써 높이값을 지정할 수 있도록 하였으며 또한 인라인 블록이나 인라인 요소에 세로 정렬이 적용되기 때문에 이 같은 스타일을 정의한 것입니다.

그리고 부모 .layer-wrap 의 자식 요소인 .pop-layer 를 인라인 블록 요소로 만듦으로서 부모 요소에 정의한 text-align: center; 로 인해 팝업 콘텐츠는 가로 중앙정렬되는 효과를 나타내게 됩니다.

여기서부터 팝업 콘텐츠를 세로 중앙정렬하는 마법이 일어납니다. .pop-layer 요소는 인라인 블록 요소로 선언했기 때문에 가상요소

.pop-layer 요소는 인라인 블록 요소로 선언했습니다. 그리고 가상요소도 또한 인라인 블록 요소입니다.

vertical-align: middle; 속성의 특징 중에 하나가 인접한 인라인이나 인라인 블록요소에 상대적으로 세로 중앙정렬을 하게 되는 속성인데 이점을 이용하는 것입니다.

가상요소는 height: 100%; 면서 vertical-align: middle; 이 정의되어 있기 때문에 html 또는 body 의 높이를 지니고 있습니다.

이 높이를 기준, 즉 인접한 인라인 블록 요소인 .layer-popup 가 vertical-align: middle; 을 선언함으로서 인접한 가상요소에 상대적으로 세로 중앙정렬을 시킬 수 있는 것입니다.

다음의 간단한 스크립트를 적용한 코드를 확인하면서 테스트해 보시기 바랍니다.

Result View

스크립트는 단순히 fadeIn, fadeOut 만 시키고 있습니다.

See the Pen 순수 CSS만으로 레이어 중앙정렬하기 by jaeheekim (@jaehee) on CodePen.

참고로 IE8+, Chrome, FF, Safari, Opera 를 지원합니다.

(IE8 이하인 경우 가상요소를 사용하지 않고 빈 태그를 이용한다면 IE8 이하에서도 사용가능)

Center Image in Box

다음의 테크닉은 일정한 박스내에서 이미지 크기에 따라 중앙정렬시키는 기법입니다.

굳이 이미지가 아니더라도 너비,높이를 가진 박스라면 쉽게 중앙정렬을 할 수 있습니다.

See the Pen 이미지 센터 정렬 by jaeheekim (@jaehee) on CodePen.

Related Info

1. 요소 중앙 정렬
2. 심플 애니 레이어팝업
3. 일반 팝업
4. Layer Pop-up (레이어 팝업)
5. Layer Pop-up(레이어 팝업) - 플러그인 타입 코드
6. Accessibility Layer Popup(접근성 레이어 팝업 코드)
7. Pure CSS : Layer-popup Auto center box #2

Jaehee's WebClub