[미나방:답변완료] 요소 중앙정렬의 숲을 헤메이다 _2일차

미래의 나에게 질문하는 방

.container로 감싼 이 div 덩어리가 고집이 좀 쎄서 잘 움직이지 않는다.
아래와 같이 중심을 잡긴했는데, 이건 임시봉변책 같다.
미래의 나야, div 덩어리를 웹사이즈가 늘어나도 줄어나도 중앙에 고정하는 법을 알려줘~

position:absolute;
  top: calc(50% - 150px);
  left: calc(50% - 250px);

div를 무대 중앙에 세우다

미래의 내가 빨리왔다. 1시간도 안되서 해결해준 미래의 나에게, 행운을!

고집센 div컨테이너덩어리를 중앙의 무대에 세우는 방법은 세가지이다.

1. position으로 세우기
   위의 해결방식이 맞았다.
   position:absolute;
   top:calc(50% -얼마);
   left:calc(50% -얼마);

2. flex로 세우기
   display:flex;
   height:100wh;
   justify-content:center;
   align-items:center;

여기 과정에서 잠시 잃어버렸던 wh단위를 만났다.
나는 이 단위를 몹시 좋아한다.
깔끔하게 떨어지는게 멋진 녀석이다.
다시 만나서 무지 반가웠다.

width는 기본값이 100%이기에 설정하지 않은 듯 하다

3. 마진으로 세우기
   width: 500px;
   margin:0 auto;

이건 block요소만 적용된다는 점과
width가 정해져있어야 한다는 주의사항이 있다 (두번째는 당연하지 않나)
그리고 이걸로 세로를 세우겠다고 margin: auto 0 하면 소용 없다.
top, bottom의 경우 auto는 0으로 취급되어 버리기때문에...눙물..(이유가 있겠지..)

정리

position, flex,margin 세가지가 있는데, 앞의 두가지를 주로 사용하자.
그리고 좋아했던 vh,vw형제도 잊지말자.
(대희님 덕분에 공부하게 되었다. 함께 공부하는 씨너지~ 위코드~)