CSS에서 수직 센터링 방법은 무엇입니까?

방법: 1. "display:table-cell;vertical-align:middle;" 스타일을 사용합니다. 2. 플렉스 레이아웃을 사용합니다. 3. 절대 위치 지정 및 변환 속성을 사용합니다. 절대 위치 지정과 위쪽 및 왼쪽과 같은 속성을 사용합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

세로 센터링은 레이아웃에서 매우 일반적인 효과 중 하나입니다. 좋은 호환성을 달성하기 위해 PC 측에서 세로 센터링을 달성하는 방법은 일반적으로 절대 위치 지정, 테이블 셀, 음수 여백 및 기타 방법을 통해 이루어집니다. CSS3를 사용하면 모바일 단말기의 수직 센터링이 더욱 다양해집니다.

방법 1: table-cell

html 구조:

<div class="box box1">
        <span>垂直居中</span>
</div>

css:

.box1{
	display: table-cell;
	vertical-align: middle;
	text-align: center;			
}

방법 2: 디스플레이: flex

.box2{
	display: flex;
	justify-content:center;
	align-items:Center;
}

방법 3: 절대 위치 지정 및 음수 여백

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

방법 4: 절대 위치 지정 및 0

.box4 span{
  width: 50%;  
  height: 50%;  
  background: #000;
  overflow: auto;  
  margin: auto;  
  position: absolute;  
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0;  
}

이 방법은 위와 다소 유사하지만 여기서는 margin:auto 및 위쪽, 왼쪽, 오른쪽, 아래쪽을 0으로 설정하여 가운데 정렬이 이루어집니다. 놀랍습니다. 그러나 여기서는 내부 요소의 높이를 결정해야 하며, 이는 모바일 단말기에 더 적합한 백분율을 사용할 수 있습니다.

방법 5: 번역

.box6 span{
			position: absolute;
			top:50%;
			left:50%;
			width:100%;
			transform:translate(-50%,-50%);
			text-align: center;
		}

이것은 실제로 방법 3의 변형이며, 번역을 통해 전환이 이루어집니다.

방법 6: display:inline-block

.box7{
  text-align:center; 
  font-size:0;
}
.box7 span{
  vertical-align:middle; 
  display:inline-block; 
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

이 방법은 정말 영리해요... 공간을 차지하려면 :after를 사용하세요.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS에서 수직 센터링 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!