Centering Things (vertically)

CSS로 텍스트와 이미지를 수평, 수직 방향 중앙에 배치하는 방법입니다.

W3C 해당 페이지 링크

 

W3C "Centering Things" 링크

 

최초 입력 2001년 5월 1일

마지막 갱신 2021년 2월 6일

 

Flex, Grid 시스템 구조를 사용하지 않고 호환성을 유지하면서 CSS1~3 기본 코드를 조합하여 element의 위치를 조정하는 방법을 설명하고 있습니다.

 

https://www.w3.org/Style/Examples/007/center.en.html#vertical

 

Centering lines of text
Centering a block of text or an image
Centering a block or an image vertically

 

Centering vertically in level 3
Centering vertically and horizontally in level 3
Centering in the viewport in level 3

 

CENTERING LINES OF TEXT CENTERING A BLOCK OR IMAGE CENTERING VERTICALLY CENTERING VERTICALLY IN CSS LEVEL 3 CENTERING VERTICALLY AND HORIZONTALLY IN CSS LEVEL 3 CENTERING IN THE VIEWPORT IN CSS LEVEL 3