[HTML][CSS]Layer 가운데 정렬

CSS를 이용한 방법.

 

transform: translateX(-50%) translateY(-50%);

 

수평 - transform: translateX(-50%);

수직 - transform: translateY(-50%);

 

예제)

.display{width:200px; posiotion:relative; left:50%; transform: translateX(-50%);}

-> 레이어의 왼쪽 모서리가 화면의 50%에서 width 값의 -50%인 100px만큼 왼쪽으로 이동이 되어 가운데 정렬이 됨

 

 

 

 

· div 중앙에 글씨 쓸 때 flex로 가운데 정렬하는 방법

 

display:flex;justify-content:center;align-items:center;

 

 

 

 

ex) 모달창 가운데 정렬

 

3가지의 div 영역을 생성한다.

 

1. 모달창의 바탕배경으로 페이지 전체를 100% 덮는 역할

2. 페이지에서 띄울 모달창의 위치를 잡는역할

3.실제 사용자가 볼 모달창 그 자체

 

 

<!-- 모달창 시작 -->

<style>

    .modal { /* 모달창의 바탕배경으로 페이지 전체를 100% 덮는 역할*/

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        display: none;

        background-color: rgba(0, 0, 0, 0.4);

        z-index:2;

    }

    .modal-wrap  { /* 페이지에서 띄울 모달창의 위치를 잡는 역할 */

        background-color:rgba(0,0,0,.1);  

        justify-content:center;

        align-items:center;    

        position:fixed;        

        top:0;  left:0;  right:0;  bottom:0;  

        display:flex;

        padding:15px;

    }

    .modal-window {  /* 실제 사용자가 볼 모달창 그 자체 */

        width:100%;              

        max-width:400px;        

        border-radius:10px;      

        overflow:hidden;        

        background-color:#264db5;        

        box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3);

    }    

    .modal-btn {

        display: inline-flex;         /* 한줄로 나열하기 위한 inline속성과 flex속성 혼합 */

        width:50%;                    /* 2개 버튼 각각 50% 영역 */

        height:100%;                  /* 30px */      

        justify-content:center;       /* 수평정렬 */            

        align-items:center;           /* 수직정렬 */            

        float:left;                   /* 좌측배치 */                      

        cursor:pointer;               /* 마우스포인터 효과 */                                        

        color: white;            

    }

    .modal-btn.confirm {

        border-right: 1px solid white;

    }

    .modal-head{

            width:100%;          

            height:50px;  

            display:flex;

            align-items:center;

            justify-content:center;

    }

    .modal-body{

            width:100%;                      

            min-height:350px;        

            max-height:450px;    

            display:flex;

            align-items:center;

            justify-content:center;  

            background-color: white;  

    }

    .modal-foot {            

        width:100%;

        height:30px;

    }

    .pointer{

        cursor: pointer;

    }

</style>

 

 

<!-- 모달창 시작 div -->

<div class="modal">

    <div class="modal-wrap">

        <div class="modal-window">

            <div class="modal-head">타이틀</div>

            <div class="modal-body">내용입니다</div>

            <div class="modal-foot">

                <span class="modal-btn confirm" id="confirm">확인</span>

                <span class="modal-btn cancel" id="cancel">창 닫기</span>

            </div>        

        </div>

    </div>

</div>