absoulte인 div 가운데 정렬하는 여러가지 방법

 

HTML

<div class="wrap">
    <div class="content">컨텐츠</div>
</div>

 

 

예전 같으면 하나의 div를 position:absolute로 가운데 정렬하려면 아래와 같이 div의 절대 크기를 지정한 뒤 (width:900px), margin-left를 사용하여 박스 크기의 절반만큼 빼주는 방식을 사용하였다. 이게 가장 정확한 방법이긴 한데, 반응형으로 작업하다보니 일일히 박스 크기를 지정하는게 여간 수고스러운 일이 아니다.

.contents {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

 

 

절대적인 크기를 따로 지정하지 않고도 자동으로 가운데 정렬하는 방법은 아래와 같다.

 

 

가로로 가운데 정렬하기

방법1)

.content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
}

 

방법2)

.content {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

 

 

 

가로로, 세로로 모두 가운데 정렬하기

.content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}