position이 absolute인 요소 중앙 정렬

position이 absolute인 자식 요소는 부모 요소로부터 거리를 산출합니다.
가까운 relative 요소의 부모만 따른다는 사실이 아닙니다. (이동)

 

HTML / CSS - 10. position: absolute; 에 대해 알아보자

 

absolute 내의 absolute는 절대좌표라 정확한 위치에 있지 않습니다.
relative 내의 absolute는 화면 이동 시에도 정확한 위치에 표시됩니다.
static은 그 자체로 top, left, ...나 z-index가 반영되지 않으므로 기준으로 위치를 잡지 못합니다.
float 역시 동작되지 않습니다.

 

 

 

position:absolute인 요소 중앙 정렬

---

position이 absolute인 요소를 중앙 정렬하려면 top 50%; left: 50%; 만으로 끝나지 않습니다. 따라서 이후 몇 가지를 추가하거나 조정해야 합니다.

 

 

첫 번째 방법 :

transform의 기능 중에서 위치 이동 기능 translate를 함께 사용해서 조정합니다. div 안의 콘텐트 (텍스트 등) 영역이 가변값이어도 자동 중앙 정렬이 되며, transform 속성은 GPU가속이 가능해 속도향상에 도움이 된다고도 합니다. 단점은 ie8 이하 버전에서는 동작하지 않습니다. ie9부터 사용 가능합니다.

 

transform : translate(-50%, -50%); //absolute 가로, 세로 가운데 정렬

 

 

 

두 번째 방법 :

margin-top과 margin-left로 조정합니다. 크로스브라우징 문제에서는 자유롭습니다. 수동으로 margin값을 설정해야하는 단점이 있는데, 아래 방법은 이에서 한 단계 업그레이드 되었습니다.

 

margin-left: -50px;
margin-right: -50px;

 

top, left, right, bottom은 0으로, margin은 auto로 설정합니다. 추가 연산은 필요없으나 width, height 값이 고정값이여야 하는 단점이 있습니다.

 

position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

 

 

 

세 번째 방법 :

다음 방법은 inline-block을 이용한 중앙정렬입니다.. 콘텐츠 영역이 고정값이 아니라 가변이어도 자동 중앙정렬이 됩니다. (출처) 예시에서 상, 하 간격은 두고 가로축에서만 중앙정렬이 필요할 때로 응용해 보았습니다. 

 

.test {
  vertical-align: middle;
  overflow: hidden;
  position: absolute;
  height: 40px;
  line-height: 40px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

 

 

 

네 번째 방법 :

table-cell을 이용한 중앙정렬로, 역시 콘텐츠 영역이 가변값이어도 사용 가능합니다.

 

<div class="layer"> <div class="layer_inner"> <div class="content">Layer Contents</div> </div> </div>

.layer {
   position: absolute;
   display: table;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%
}
.layer .layer_inner {
   display: table-cell;
   text-align: center;
   vertical-align: middle
}
.layer .content {
   display: inline-block;
   background: #f00
}

 

 

 

다섯 번째 방법 :

flex를 이용한 방법으로 IE10 이상 모든 브라우저 가능하며 absolute인 요소 안의 영역이 가변이어도 가능합니다.
display:flex는 display:box, display:flexbox를 거쳐서 나온 최종버전격입니다.

 

<div class="layer">
	<span class="content">Layer Contents</span>
</div>

.layer {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  display: flex;
  align-items: center;
  justify-content: center;
  display: -webkit-flex;
  -webkit-align-item: center;
  -webkit-justify-content: center;
}
.layer .content {background: #f00}

/* Internet Explorer 10 */
display:-ms-flexbox;

/* Firefox */
display:-moz-box;

/* Safari, Chrome, and Opera */
display:-webkit-box;

/* W3C */
display:box;

box-pack:start|center|end;
-webkit-box-pack:start|center|end;
-moz-box-pack:start|center|end;

 

구버전에서는 display:box와 병행해야 사용 가능합니다. 아래는 병행한 예입니다.

 

.layer {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  -moz-box-pack: center;
  -moz-box-align: center;
  -ms-box-pack: center;
  -ms-box-align: center;
}