CSS를 수직 달성 센터 5 가지 방법

수직 센터를 달성 하기 위해 CSS를 사용 하 여 개체의 다양 한 방법으로, 올바른 방법을 선택 하기 어렵습니다. 나 보고 좋은 센터 사이트를 만드는 방법 좋은 방법을 설명 드리죠.

그것은 사용 하기 쉬운 CSS를 수직으로 중앙입니다. 몇 가지 방법을 일부 브라우저에서는 유효 하지 않습니다. 수직, 개체를 만드는 5 가지 방법 및 그들의 찬 부 양론 살펴 봅시다. (대 한 간단한 설명에 대 한 테스트 페이지를 보아 라.) )

방법 1

이 메서드는 테이블로 우리 테이블의 수직 정렬 속성 속성을 사용할 수 있도록 몇 가지 div의 디스플레이 설정 합니다.

< div id = "래퍼" >
< div id = "셀" >
< div class = "내용" >
콘텐츠는 여기가 < / div >
< / div >
< / div >

#wrapper {디스플레이: 테이블;}
#cell {디스플레이: 테이블-셀; 수직 정렬: 중간;}

장점:

콘텐츠 높이 (CSS에 정의 되지 않은)를 동적으로 변경할 수 있습니다. 콘텐츠 래퍼에 충분 한 공간이 없을 때 잘리지 않습니다.

단점:

인터넷 익스플로러 (또는 심지어 IE8 베타) 잘못 된, 많은 중첩 된 태그 (실제로 그렇게 나쁘지 않아, 다른 주제)

방법 2:

이 방법은 절대 위치가 지정 된 DIV를 사용 하 여 최고 50%, 부정적인 콘텐츠 높이를 설정 하는 위쪽 여백 설정. 즉, 개체는 CSS에서 고정 된 높이 지정 해야 합니다.

고정된 높이 있기 때문에, 지정 내용에 대 한 오버플로: 자동 너무 많은 콘텐츠가 있는 경우 스크롤 막대가 표시 됩니다, 콘텐츠 오버플로 하지 않도록 할 수 있습니다.

< div class = "내용" >
콘텐츠는 여기가 < / div >

#content 없음
위치: 절대;
탑: 50%;
높이: 240px;
여백-가기:-120px; / * 높이의 절반을 부정적인 * *
}

장점:

모든 브라우저에 적용 됩니다.
필요한 중첩 된 태그가 없습니다

단점:

충분 한 공간이 없는 경우, 콘텐츠 (신체 내에서, 사용자는 스크롤 막대가 표시 되지 않습니다 브라우저 창 축소 때 div) 처럼 사라집니다.

방법 3

이 메서드는 콘텐츠 요소 외부 div를 삽입합니다. 설정이 div 높이: 50%; 여백-하단:-contentheight;
콘텐츠는 float를 지우는 하 고 중간에 표시 됩니다.

< div id = "뜨는" >
< div id = "내용" >
여기 콘텐츠 < / div >
< / div >

#floater {플 로트: 왼쪽; 높이: 50%; 여백-하단:-120px;}
#content {취소: 둘 다 높이: 240px; 위치: 상대적;}

장점:

모든 브라우저에 적용 됩니다.
콘텐츠가 잘리지 않습니다 충분 한 공간이 없는 경우 (예: 창 축소), 스크롤 막대 표시

단점:

내가 생각할 수 있는 유일한 것은 여분의 빈 요소에 대 한 필요성 (아니에요 그, 그것은 또 다른 주제)

방법 4

이 메서드는 위치: 절대, 고정된 폭 및 높이 div와 함께 사용 하 여 이 div 상단: 0;로 설정 되어 하단: 0; 하지만 고정된 높이가지고 있기 때문에 실제로 수 없습니다 하 고 위아래로 두 간격 0, 그래서 여백: 자동; 그것은 센터. 여백: 자동;를 사용 하 여 블록 레벨 요소를 수직으로 가운데 쉽습니다.

< div id = "내용" >
여기 콘텐츠 < / div >

#content 없음
위치: 절대;
상단: 0;
하단: 0;
왼쪽: 0;
오른쪽: 0;
여백: 자동;
높이: 240px;
폭: 70%;
}

장점: 간단한

단점:

잘못 된 인터넷 익스플로러 (IE8 베타)
충분 한 공간이 없는 경우 내용이 잘립니다, 하지만 아무 스크롤 막대 표시

방법 5

이 메서드만 한 줄에 텍스트를 배치할 수 있습니다. 단순히 텍스트 중심을 개체의 높이 값에 줄 높이 설정 합니다.

< div id = "내용" >
여기 콘텐츠 < / div >

#content {높이: 100px; 라인-높이: 100px;}

장점:

모든 브라우저에 적용 됩니다.
충분 한 공간이 없을 때 잘리지 않습니다.

단점:

텍스트 (블록 수준 요소는 유효 하지)에 유효
그것은 잘못 된 단어가 있으면 더 행입니다.