div 콘텐츠의 수직 중앙 정렬을 달성하는 5가지 방법-CSS 튜토리얼-php.cn

1. 줄 높이 방법

한 줄만 있거나 몇 개의 단어가 세로로 가운데 정렬되어 있는 경우 가장 간단한 방법은 텍스트의 줄 높이를 텍스트의 높이와 동일하게 만드는 것입니다. 컨테이너(예:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

로그인 후 복사

) 이 코드는 단락에서 텍스트를 세로로 가운데 정렬하는 효과를 얻을 수 있습니다.

2. 패딩 방법

또 다른 방법은 줄 높이 방법과 매우 유사합니다. 이는 하나 또는 여러 줄의 텍스트를 세로로 가운데 맞추는 데에도 적합합니다. 원칙은 다음과 같이 패딩을 사용하여 내용을 세로로 가운데에 맞추는 것입니다.

p { padding:20px 0; }

로그인 후 복사

이 코드의 효과는 line-height 방법과 유사합니다.

3. 테이블 방법 시뮬레이션

컨테이너를 display:table로 설정한 다음 하위 요소, 즉 중앙에 세로로 표시할 요소를 display:table-cell로 설정한 후세로 정렬을 추가합니다. 그것을 달성하기 위해 중간.

html 구조는 다음과 같습니다.

测试垂直居中效果测试垂直居中效果

로그인 후 복사

css 코드:

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}#cell{display:table-cell; vertical-align:middle;}

로그인 후 복사

아쉽게도 IE7 이하는 지원하지 않습니다.

넷째,

css 코드를 구현하기 위한 CSS3 변환은 다음과 같습니다.

.center-vertical{ position: relative; top:50%; transform:translateY(-50%); }.center-horizontal{ position: relative; left:50%; transform:translateX(-50%); }

로그인 후 복사

Five: 수평 및 수직 센터링을 구현하는 CSS3 상자 방법

html 코드:

我是多行文字

로그인 후 복사

css 코드:

.center { width: 300px; height: 200px; padding: 10px; border: 1px solid #ccc; background:#000; color:#fff; margin: 20px auto; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; -o-box-align: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; -ms-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }

로그인 후 복사

위 내용은 div 콘텐츠의 수직 중앙 정렬을 달성하는 5가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!