[CSS] position absolute 가운데 중앙 정렬 하는 법

☘️ 기본 코드 작성하기

absolute 를 적용하기 위해 부모와 자식을 만들어주었다.

HTML 코드

<div class="parent">
  <div class="child" />
</div>

CSS 코드

.parent {
  width: 500px;
  height: 500px;
  background-color: aquamarine;
  position: relative;
}

.child {
  width: 30%;
  height: 30%;
  background-color: pink;
  position: absolute;
}

결과

 

☘️ 자식 요소 가운데 배치하기

❌ top, left 50%

자식 요소를 가운데 배치하려면 어떻게 해야할까?

top(또는 bottom) 이랑 left(또는 right) 를 50% 로 하면 될 것 같다.

부모 기준으로 위에서 50%, 왼쪽에서 50% 이니깐 가운데에 배치 될 것 같기 때문이다!

top: 50%;
right: 50%;

 

하지만.. 결과는 다음과 같다.

결과

이런 결과가 나온 이유는 top 에서 50% 부터, left 에서 50% 부터 요소가 배치가 되기 때문이다.

이유

 

🔺 calc() 함수

calc() 
CSS 속성의 값으로 계산식을 지정할 수 있는 함수
[출처 - MDN]

 

CSS 의 calc() 함수를 사용하여 top 과 left 에 계산한 값을 넣을 수 있다.

50% 에서 요소의 길이(해당 코드에서는 30% 로 설정)의 반(15%)만큼 빼면 정중앙에 배열할 수 있다.

top: calc(50% - 15%);
right: calc(50% - 15%);

결과

이렇게 하면 요소를 정중앙에 배열은 할 수 있지만,

calc 함수를 사용하면 중앙에 배치할 요소의 크기를 알고 있어야하며 요소의 크기가 변하면 중앙 정렬되지 않는다.

 

⭕️ transform

transform
요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여
[출처 - MDN]

 

CSS 의 transform 속성을 사용하여 요소의 사이즈의 절반만큼 뒤로 이동할 수 있고

위에서 사용한 calc 와 같은 원리이지만 요소의 길이를 직접 알지 않아도 된다.

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

결과

 

⭕️ margin

top, bottom, left, right 값을 0으로 설정하고 margin 값을 auto 로 설정하여 중앙 정렬할 수 있다.

inset: 0; 으로 설정함으로 요소의 모든 측면을 화면의 가장자리에 배치하게 되고, margin: auto; 를 통해 외부 여백을 자동으로 조정하여 요소를 중앙에 정렬할 수 있다.

inset: 0; /* top, bottom, left, right 를 한꺼번에 설정 */
margin: auto;

 

결과

 

☘️ 마무리 하며...

position 의 속성이 absoulte 일 때 중앙에 배열하는 법을 알아보았다.

이를 활용하여 중앙뿐만 아니라, 수평 or 수직 기준으로 요소를 정렬할 수 있다!