CSS 브라우저 호환 수평/수직 가운데 정렬 방법

no_mkd

1. 수평 가운데 정렬

텍스트, 이미지 등 인라인 요소의 수평 가운데 정렬

부모 요소에 text-align: center;를 설정합니다. 예: DemoDemo

너비가 고정된 블록 요소의 수평 가운데 정렬

margin-left: auto; margin-right: auto;를 설정합니다. 예: Demo

너비가 유동적인 블록 요소의 수평 가운데 정렬

방법 1

table 요소의 너비 자동 계산 특성과 margin-left: auto; margin-right: auto;를 활용하여 구현합니다. 예: Demo

방법 2

블록 요소를 display: inline;으로 설정한 뒤 인라인 요소처럼 처리(컨테이너에 text-align: center; 설정)합니다. 예:

방법 3

컨테이너에 float: left;와 position: relative; 그리고 left: 50%;를 설정하고, 자식 요소에 position: relative;와 left: -50%;를 설정합니다. (가로 배열을 위해 float: left; 추가 여부 선택 가능)

2. 수직 가운데 정렬

부모 요소의 높이가 유동적인 텍스트, 이미지, 블록 요소의 수직 가운데 정렬

컨테이너에 padding-top = padding-bottom을 설정하면 됩니다. 예: Demo

부모 요소의 높이가 고정된 한 줄 텍스트의 수직 가운데 정렬

line-height를 컨테이너 높이와 같게 설정하여 구현할 수 있습니다. 예: Demo

부모 요소의 높이가 고정된 여러 줄 텍스트, 이미지, 블록 요소의 수직 가운데 정렬

방법 1

table 자식 요소인 th/td의 기본값인 vertical-align: middle;(table에 height: 100%; 설정 필요)을 활용하여 구현합니다. 예: Demo

방법 2

display: table-cell;과 vertical-align: middle;에 css hack을 추가하여 구현합니다. 예: Demo

ie6/7을 위한 css hack의 유효성은 검증되지 않았습니다.