CSS 수직 센터링 구현 코드

이 글은 주로 CSS 수직 센터링 구현 코드를 공유합니다. 이 CSS 코드가 모든 사람에게 도움이 되기를 바랍니다.

1. 한 줄의 텍스트인 경우 line-height 값은 높이와 같습니다.

경우는 다음과 같습니다.

.verticle{    height: 100px;    line-height: 100px;}

2 알려진 너비와 높이가 있는 요소의 경우 절대 위치 지정을 사용합니다.

.container {  position: relative; 
}.vertical {  width : 300px; /*子元素的宽度*/
  height: 300px;  /*子元素高度*/
  position: absolute;  top:50%;  /*父元素高度50%*/
  left: 50%; 
  margin-left: -150px;  margin-top: -150px; /*自身高度一半*/}

3. CSS3 회전을 사용하는 알 수 없는 너비 및 높이 요소

케이스는 다음과 같습니다.

.container {  position: relative; 
}.vertical {     position:absolute;     top: 50%;     left:50%;     transform:translate(-50%,-50%);}

4 CSS3의 유연한 상자 모델

케이스는 다음과 같습니다.

.content{     display:flex;     justify-content: center; /*子元素水平居中*/
     align-items: center; /*子元素垂直居中*/}

5. 테이블 레이아웃을 시뮬레이션합니다. 단점은 IE6과 7이 호환되지 않는다는 것입니다.

사례는 다음과 같습니다:

.container {      display: table;}.content {      display: table-cell;      vertical-align: middle; }

관련 권장 사항:

6가지 CSS 수평 및 수직 센터링 솔루션

4가지 CSS 수평 및 수직 센터링 구현 방법 수직 센터링

img 및 div의 범위에서 수직 센터링을 만드는 방법

위 내용은 CSS 수직 센터링 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!