[CSS] position으로 가운데 정렬하기

웹을 만드는 작업중 css처리를 하면서 위와 같은 요소가 있다고 가정을 해보겠다.

 

우린 저 요소 안에있는 분홍색 사각형이 초록색 사각형의 한가운데 오게끔 css position속성을 이용해 만들고자 한다.

 

우선 마크업 방식은 아래와 같다.

<div class="big">
	<div class="small"></div>
</div>

 

big이란 클래스명을 가진 요소가 분홍색 사각형의 기준점이 되어줘야 하고

small은 big의 기준점에서 한가운데로 자유롭게 이동해야하기때문에 아래와 같이 적용해준다.

 

big 이란 요소에는 position: relative;

small 이란 요소에는 position: absolute;

.big {
  width: 300px;
  height: 300px;
  background: green;
  position: relative;
}

.small {
  width: 50px;
  height: 50px;
  background: #ff00ff;
  position: absolute;
}

 

 

실제 비율대로라면 small이란 요소에 top: 50%, left: 50%만 줘도 정가운데로 오겠지라고 생각할 수도 있겠지만 실제로

그렇게 되지 않는다.

.big {
  width: 300px;
  height: 300px;
  background: green;
  position: relative;
}

.small {
  width: 50px;
  height: 50px;
  background: #ff00ff;
  position: absolute;
  top: 50%;
  left: 50%;
}

위와 같이 css를 작성하면 기준점인 부모요소가 어떤 크기이던간에 위의 이미지 처럼 한 가운데로 오지않는다.

원하는대로 정 가운데 오게 하기위해선 반드시 같이 써야하는 속성과 값이 있다.

바로 transform: translate(-50%,-50%) 이다.

 

.big {
  width: 300px;
  height: 300px;
  background: green;
  position: relative;
}

.small {
  width: 50px;
  height: 50px;
  background: #ff00ff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

위와같이 작성하면 아래와 같이 정상적으로 small이란 요소가 position 속성을 이용하여 기준점인 big이란 요소의 정 가운데에 오는 것을 확인 할 수가 있다.

 

위와 같이 처리하면 기준점이 되는 부모요소가 절대값을 가진 요소가 아닌 비율에 따라 달라지는 값을 가지고있다고 하더라도 정가운데 위치를 정확하게 유지한다.