position:absolute 인 요소를 중앙에 위치시키는 방법

 

css 를 하다보면 position을 사용해야할 때가 있다. 

 

그런데 position은 위치를  위, 아래 , 오른쪽, 왼쪽 하나하나 지정을 해줘야해서, 

 

내가 원하는 위치에 둘 수는 있지만

 

정 가운데 두고 싶을 때에는 어렵다...ㅋㅋㅋ 

 

이럴때, 중앙정렬 하는 방법!

 

 

.title {position:absolute; left;50%; transform:translateX(-50%);}

 

화면의 전체 가로 수치에서 절반 만큼의 위치로 이동 시킨다. (left:50%)

자신의 가로 수치의 절반 만큼 마이너스 이동 시킨다. (transform:translateX(-50%))

 

 

 

참조:http://blog.freezner.com/archives/1877