flex 대신 가운데 정렬 만드는 방법 (w/ absolute)

position: absolute 를 통해서 가운데 정렬을 만드는 방법

canvas 엘리먼트가 있다고 가정 (div와 같음)

 

#canvas1 {
  border: 5px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
}

 

여기까지만 하면, element좌상단 좌표를 기준으로 정가운데 정렬(top, left 50%) 된다.

 

 

여기에다 element를 왼쪽 오른쪽으로 이동시켜주면 가운데 정렬이 될것이다.

 

 

transform: translate(-50%, -50%) 을 적용해주면 된다!

 

#canvas1 {
  border: 5px solid black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

완성된 모습