카테고리 없음

tailwind transform:translate(-50%,-50%)

Mori_FEDev 2022. 9. 30. 16:44

일반 css 속성 중 position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)를 쓸 일이 많다.

position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

tailwind에서는 transform:translate(-50%,-50%) 를 아래처럼 쓸 수 있다

className="transform absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] transform"