absolute 요소 중앙정렬

`absolute`

absolute 요소의 기본적인 containing block은 body이다.
특정 부모 요소를 containg block으로 만들고 싶다면 absolute 요소를 감싸고 있는 block 요소에 position:relative를 적용한다.

<div style="position:relative">
  <div style="position:absolute">absolute</div>
</div>

`transform`

absolute 요소를 움직이기 위해서는 top, left를 사용해야 한다.
x축을 기준으로 중앙정렬을 하기 위해선 left: 50%로 이동시킨다.
left:50%만큼 이동시키면 absolute의 요소 시작지점을 기준으로 containing block의 50%만큼 이동한다. 👉🏻 이때 사용하는 것이 transform속성

`translate`

요소의 위치를 수평 또는 수직 방향으로 변경하거나, 수평 및 수직 방향으로 변경할 때 사용하는 함수

x축, y축 모두 중앙으로 정렬하고 싶다면, translate 함수를 사용한다.

`TailwindCSS`

Previous<a></a> 클릭 영역 설정 NextSVG를 배경으로 사용하기

Last updated 1 year ago

<div
  style="
      width: 240px;
      height: 100px;
      background-color: aqua;
      position: absolute;
      left: 50%;
      transform: translateX(-50%)
    "
>
  여기 DIV를 중앙으로 옮기는 방법
</div>

<div style="
      width: 240px;
      height: 100px;
      background-color: aqua;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%)
    ">여기 DIV를 중앙으로 옮기는 방법</div>
      </div>