position 속성에 absolute값을 사용하여 엘레멘트를 수직정렬하는 방법입니다.
엘레멘트의 position 속성을 absolute로 지정하고 top과 left값을 각각 50% 지정합니다. 그럼 엘레멘트는 왼쪽 상단의 모소리가 정중앙에 위치하게 됩니다. 하지만 콘텐츠의 영역이 있기 때문에 왼쪽 모소리가 정중앙에 위치하게 됩니다.
따라서 콘텐츠를 중앙에 위치시키게 하기 위해 영역의 반 만큼 왼쪽과 위로 이동시켜야 합니다. 이 때 margin의 값을 음수로 지정하여 영역을 이동시킵니다. 따라서 CSS는 다음과 같이 작성되어야 합니다.
마진값을 영역의 반만큼 음수로 지정하여 엘레멘트를 중앙에 위치시킬 수 있습니다.
'HTML& CSS > CSS' 카테고리의 다른 글
| 배경(background) (0) | 2012.05.15 |
|---|---|
| 폰트 (0) | 2012.05.15 |
| 엘레멘트를 감추는 방법 (0) | 2011.04.04 |
| 한 문서에 여러개의 스타일이 존재할 때 캐스케이딩(Cascading) 순서 (0) | 2011.03.31 |
| 스타일의 상속(inheritance) (0) | 2011.03.31 |