CSS 정가운데 간단히 정렬하는법

박스 하나를 영역의 정 가운데에 정렬하려면 어떻게 해야할까? 

 

답은 여러가지가 있겠지만 쉬운 방법은 다음과 같다.

position:absolutetop:50%; 
left:50%;transform: 
translate(-50%,-50%);

 

이 방법을 사용할 경우 같은 flow에 있던 요소들이 absolute된 요소를 인식하지 못하므로 주의가 필요하다. 또한, 부모요소에 relative를 걸어주어야 한다.