BLOG ARTICLE 정렬 | 1 ARTICLE FOUND

  1. 2014.04.21 CSS만 사용해서 가로/세로축 중앙정렬 시키기

CSS를 사용해서 중앙정렬을 하려면 여러 팁들이 있습니다. 

제가 사용하는 방법은 크게 두 가지 입니다. 

1. 고정된 width, height 값을 가지는 element 의 정렬. 
2. 가변폭을 가지는 element 의 정렬. 

1번의 경우는 아주 쉽습니다. 

.element{ 
  width: 100px; 
  height: 100px; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  margin-left: -50px; 
  margin-top: -50px; 


쉽게 이해되시죠? 
마이너스 마진값을 가지고, 결국 자신의 폭의 절반을 빼주는 겁니다. 
이렇게 하면, 언제나 화면 중앙에 요소배치가 가능합니다. 

2번의 경우는 좀 더 복잡합니다. 마컵이 여러 단계로 필요한데요. 

<!-- HTML MARKUP --> 
<div class="to_this"> 
  <div> 
      <div> 
        <div class="align_me"></div> 
      </div> 
  </div> 
</div> 

무려 네 단계의 마컵을 거칩니다. 

CSS 를 less.css 기준으로 보여드리면 이렇습니다. (이해하기 쉬우시라고) 

.to_this{ 
  position:absolute; 
  top:0; left:0; bottom:0; right:0; 
  z-index:10; 
  >div{      
      display:table; 
      width:100%; 
      height:100%; 
      >div{ 
          display:table-cell; 
          vertical-align: middle;          
          .align_me{          
          padding:10px; 
          } 
      } 
  } 


1) 결국 window 를 기준하려면 기준점이 필요하기 때문에, div.to_this 가 절대포지셔닝으로 전체화면을 채웁니다. 
2) 그 바로밑의 div 는 table 역할을 해야하기 때문에 역시 전체화면을 꽉 채우는 table 로서의 역할 
3) 그 바로 아래가 table-cell 로서 중앙정렬자 역할을 해주고요. 
4) 마지막 div.align_me 가 가변폭을 가지는 그 무엇이 될 수 있습니다. 


쉽게말해, table / table-cell 관계를 가지고 중앙정렬을 하는 것인데, 늘 화면 중앙에 두기 위해서 여러 꼼수를 쓴 겁니다. 

저작자 표시 비영리 변경 금지
신고