div 콘텐츠의 수직 중앙 정렬을 달성하는 5가지 방법

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 구조는 다음과 같습니다.

<p id="wrapper">
    <p id="cell">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </p></p>

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 코드:

<p class="center">
  <p class="text">
    <p>我是多行文字</p>
    <p>我是多行文字</p>
    <p>我是多行文字</p>
  </p></p>

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!