1. 패딩 사용

        

div{
	width:200px;
	padding-top:50px;
	padding-bottom:50px
}

span{
	font-size:50px
}

padding에서 주로 상자 모델에 대한 계산을 파악하는 것과 관련된다. 각 수치의 장점은 간단하다. 위아래 간격만 설정하면 단점이 있다. 부모 요소는 고정 높이를 설정할 수 없다.

2.line-height

        

div{
	width:350px;
	heigh:100px;
}
span{
	line-height:100px
}

line-height 속성에 익숙해지셨을 거라고 믿습니다. 부모 요소의height와 비교되는 값이 여기에 일깨워야 할 점은 하위 요소가 p 라벨을 사용한다면 하위 요소 p의 css에padding:0px를 추가해야 같은 효과를 얻을 수 있다는 것입니다. 장점: 부모 요소의 고정 고도를 설정할 수 있는 단점: 많지 않은 숫자와 여러 줄 문자를 설정할 수 있습니다.

3. flexbox - 신축성 박스

가장 전면적인 수직 거중 방법

div{
	height:210px;
	width:170px;
	display:flex;
	flex-direction:column;
	juntify-content:center;
}

신축성 케이스의 중요성에 대해 여러분이 다 알고 계신다고 생각합니다. 만약 당신이 아직 잘 모르신다면 제발 가보세요.장점: 알기 쉬운 단점: 호환성

4.grid

	

		
메인 스테이션
		
이번 연극
		
게임 센터
		
생방송
		
회원 구매
		
만화
	


ul{
	display:grid;
	grild-template-columns:repeat(6,1fr)
	align-item:center;
	justify-content:center
}

장점: 레이아웃이 매우 단점: 호환성 grid는 다행다열의 레이아웃 네비게이션 표시줄에 비교적 적합합니다. 본인은 flex를 사용하는 것이 가장 적합합니다.

5.absolute

	

		
	



div{
	position:relative
}
i{
	height:50px;
	width:50px;
	position:absolute;
	top:50%;
	transfrom:translateY(-50%)
}

여기서 이 방법은 매우 적합하다. 예를 들어 창 브라우저에 비해 수직으로 가운데를 맞추는 것이 틀림없이 좋은 방법이다