CSS에서 div를 세로 중앙에 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 div를 세로 중앙에 설정하는 방법

coldplay.xixi

풀어 주다： 2021-04-29 11:09:57

원래의

4481명이 탐색했습니다.

CSS를 사용하여 div의 수직 중심을 설정하는 방법: 1. 실제 높이를 행의 높이와 동일하게 설정합니다. [line-height] 2. 위쪽 및 아래쪽 패딩 값이 되도록 패딩을 설정합니다. 동일합니다.

CSS에서 div를 세로 중앙에 설정하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

div 수직 센터링을 설정하는 Css 방법:

1. 한 줄 수직 센터링

컨테이너에 텍스트 줄이 하나만 있는 경우 센터링만 설정하면 비교적 간단합니다. 실제 높이 및 위치 행 높이의 선 높이는 동일할 수 있습니다.

예:

div {  
height:25px;  
line-height:25px;  
overflow:hidden;  
}

로그인 후 복사

이 코드는 매우 간단합니다. Overflow:hidden 설정은 나중에 내용이 컨테이너를 초과하는 것을 방지하거나 자동으로 줄 바꿈을 수행하여 수직 중앙 정렬 효과를 얻을 수 없도록 하는 데 사용됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
　　<title> 单行文字实现垂直居中 </title>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　<style type="text/css">
　　　　body { font-size:12px;font-family:tahoma;}
　　div {
　　　　height:25px;
　　　　line-height:25px;
　　　　border:1px solid #FF0099;
　　　　background-color:#FFCCFF;
　　}
　　</style>
</head>
<body>
　　<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>

로그인 후 복사

2. 높이를 알 수 없는 여러 줄 텍스트의 세로 가운데 맞춤

콘텐츠의 높이가 가변적인 경우 이전 섹션에서 언급한 가로 가운데 맞춤을 달성하는 데 사용된 마지막 방법을 사용할 수 있습니다. 상하 패딩 값이 동일하도록 패딩합니다. 다시 말하지만, 이것은 수직 중심을 "보는" 방법이며 텍스트가

를 완전히 채우도록 만드는 방법일 뿐입니다. 다음과 유사한 코드를 사용할 수 있습니다.

div {  
padding:25px;  
}

로그인 후 복사

이 방법의 장점은 모든 브라우저에서 실행할 수 있다는 점이며 코드도 매우 간단하지만 이 방법을 적용하기 위한 전제 조건은 컨테이너의 높이가 확장 가능합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
　　<title> 多行文字实现垂直居中 </title>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　<style type="text/css">
　　　　body { font-size:12px;font-family:tahoma;}
　　　　div {
　　　　padding:25px;
　　　　border:1px solid #FF0099;
　　　　background-color:#FFCCFF;
　　　　width:760px;
　　}
　　</style>
</head>
<body>
　　<div><br>　　　　<pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！

로그인 후 복사