CSS : 요소 및 레이어 중앙정렬 방법

퍼블리싱을 진행하다보면 레이어를 가운데정렬 할 일이 빈번하게 일어나는데요, 텍스트의 중앙정렬은 text-align 이나 line-height 를 이용하지만 레이어 중앙정렬은 어떻게 해야할까요? 하단에보이는 박스로 예시를 보여드리겠습니다.

 

BOX

 

position:absolute 와 margin 마이너스값 을 이용한 방법 

우선, 가장 일반적이면서 간단한 방법입니다. 60px 이라는 정사각형 박스라고 가정하에 부모요소인 wrap 에  position: relative  로 기준을 잡고, 박스에  position: absolute  를 50% 씩 걸면 좌표의 기준이 박스 상단으로 잡히기때문에 기준점은 박스 상단을 기준으로 정렬이되어 중앙정렬이 되지않습니다. 이러한 경우에는  margin  값으로 박스의  절반만큼 마이너스 시켜주면 해결이됩니다. position: fixed 또한 같은방법으로 사용가능합니다. 하지만 이방법은 중앙정렬시킬 컨텐츠 크기의 픽셀값을 알아야한다는 단점이 있는데 이를 보안하여 사용할수있는방법은 하단에 transform 을 이용한 방법입니다.

 

<div class="wrap">
  <div class="box"></div>
</div>

.wrap{ position: relative; }
.box { width: 60px;
      height: 60px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -30px;
      margin-left: -30px; }

 

 

BOX

 

 

transform: translate을 이용한 방법

위에서 언급했던 position 을 이용한방법의 단점을 보완한 방법입니다.  transform: translaste()  을 사용한 방법인데요. 위와같은 html 이 동일하다는 가정하에, 이방법 또한 위방법과 마찬가지로 position 으로 top, left 50% 를 준다음  transform: translate(-50%, -50%)  절만 만큼 반대방향으로 마이너스시키는 방법입니다. 이방법은 컨텐츠에 픽셀값을 부여하지않아도 중앙정렬이 가능합니다. 하단에 코드를 참고해주세요.

.wrap{ position: relative; }
.box { width: 60px;
      height: 60px;
      position: absolute;
      top: 50%; left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }

 

display: flex(flex-box)를 이용한 방법

CSS3인 flexbox 를 사용하기위해서 부모요소인 .wrap 클래스에  display: flex  를 선언하면 flexbox 가 시작됩니다. IE 에서는  display: flex-box  라고 선언하며 IE10 에서는 -ms-display: flex-box 라고 선언해야합니다. 선언한 엘리먼트가  flex-container  가 되며 정렬해야할 그 자식들은  flex-items  가됩니다. 부모요소안에 인라인요소가 있을경우 원하는 정렬이 나오지않을수도있으며, flex를 지원하는 브라우저에 제한이있습니다. flex로 정렬하는방법은 매우 다양하며 다음 글에서 상세하게 적도록 하겠습니다.

 

인터넷익스플로러	크롬	사파리	파이어폭스	오페라
11.0 10.0 -ms-	29.0 21.0 -webkit-	9.0 6.1 -webkit-	28.0 18.0 -moz-	17.0

 

.wrap{ display: flex;
      justify-content: center;
      align-items: centerl }
.box { width: 60px; height: 60px; }

 

BOX

 

modal

이방법은 흔히 중앙에 나타나는 팝업창(모달창) 을 띄우기에 적합한 CSS입니다. 단,  :before  기능을 지원하지않는 브라우저는 정상적으로 표현되지않습니다. 하단 코드와같이 입력하면 큰틀은 잡으실수있고, popup_upper 안에 엘리먼트를 하나 생성하여 사용하실 디자인과같이 작업하시면됩니다! 팝업창은 절대적으로 윈도우기준으로 떠있어야하므로 꼭  position:fixed  로 해주셔야 다른 position 과 겹치지않고 정상적으로 사용하실수있습니다.

<div class="popup_wrap">
  <div class="popup_upper"></div>
</div>

.popup_wrap { width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: rgba(0,0,0,0.6); }
.popup_wrap:before{ display:inline-block;
    width: 0;
    height: 100%;
    position: relative;
    vertical-align: middle;
    overflow:hidden;
    content: "";
    font-size:0; }
.popup_upper{ display: inline-block;
    width: 80%;
    position: relative;
    vertical-align: middle;
    background-color: #fff; }