220321(css)

https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element

How to center a "position: absolute" element

프로젝트했던걸 다시 수정중인데 버튼이 그냥 중앙에 가있길래 궁금해서 position absolute center라고 구글에 검색해보았다.

패캠에서 중앙에 오게하는 방법을 얘기할 때, calc(50% - width값의 절반)이라고 했어서 계속 그렇게 사용했는데, 구글링을 해보니, 위와 같은 방법도 존재했다(훨씬 좋음)

예전 프로젝트를 할 때, 화면을 데스크탑 기준으로해서 만약 디바이스의 화면을 줄이면 옷장의 크기가 작아지는 바람에옷장의 크기를 min-width를 설정한 상태에서 width값을 상대적 단위인 vh vw를 사용했었다. 화면의 크기를 줄일 때 어느 기준으로 작아져서 width:300px;로 적용됐을때 open버튼이 아주 저리가있고 개판이었다....짜증나서 막바지에 포기한 감이 없지 않아 있었다.

이런 방법이 있었구나. 정말 배우면 배울수록 놀랍고 적용이 될때 너무 즐겁다.

/*전*/
.main-wrap .wrap-closet{
  width:19vw;
  min-width: 300px;
  position:absolute;
  bottom: 5vh;
  left:calc(50% - 9.5vw);
}  
/*후*/
.main-wrap .wrap-closet{
  width:19vw;
  min-width: 300px;
  position:absolute;
  bottom: 5vh;
  left:50%;
  transform: translateX(-50%);
}