화면 정가운데 div 배치

div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}
 
 
 
 

가운데 배치?

그거 left:50%, top: 50%두면 되는거 아니냐?

하고 덤볐다가 막상해보니 멘붕이 왔다.

 

 

css를 보면 상위, 좌측 50%로 화면 비율을 잡는다. 

위치는 고정되어야하니 absolute로.

 

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

를 사용하면 요소를 중앙으로 모은다.

 

구글링해서 나오는px, -margin 지정하는것보다

반응형으로 잘 작동하는것같다.

눈으로 보면 비슷한데 깐깐한 평가에 대차게 까일 수 있다.

 

 

p.s. 스택오버플로의 유저 답변에 ie에서 제대로 작동이 안되다든지,

애니메이션 사용시 우선시되어 css가 꼬일 수 있다는 견해가 있다.

[CSS]　translate(-50%,-50%);