CSS에서 수직 센터링을 설정하는 방법-CSS 튜토리얼-php.cn

CSS에서 수직 센터링을 설정하는 방법

青灯夜游

풀어 주다： 2023-01-05 16:10:27

원래의

58484명이 탐색했습니다.

CSS에서 수직 중앙 정렬을 설정하는 방법: 1. line-height 속성을 사용하여 텍스트를 수직 중앙에 배치합니다. 2. CSS3 flex 레이아웃을 사용하여 텍스트를 수직 중앙에 배치합니다. 3. 절대 위치 지정을 사용하고 블록 요소를 수직 중앙에 변환합니다. flex 레이아웃은 블록 요소를 수직으로 중앙에 배치합니다.

CSS에서 수직 센터링을 설정하는 방법

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

css는 텍스트를 세로로 가운데에 맞추도록 설정합니다

1. line-height는 텍스트를 세로로 가운데에 맞춥니다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
    width: 300px;
    height: 300px;
    background: paleturquoise;
    line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>

로그인 후 복사

렌더링:

CSS에서 수직 센터링을 설정하는 방법

이 방법으로 div의 텍스트를 가운데에 맞출 수 있습니다. 수평 및 수직으로

2는 텍스트를 수직 중심으로 만듭니다. 알 수 없는 요소 높이 )
요소의 높이를 모르는 경우 먼저 요소를 컨테이너 중앙에 배치한 다음 변환의 변환 속성을 사용하여 요소의 중심을 컨테이너 높이와 일치시켜야 합니다. 수직 센터링을 달성하기 위해 상위 컨테이너의 중심:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
   width: 300px;
   height: 200px;
   background: paleturquoise;
   /*设置为伸缩容器*/
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   /*垂直居中*/
   -webkit-box-align: center;/*旧版本*/
   -moz-box-align: center;/*旧版本*/
   -ms-flex-align: center;/*混合版本*/
   -webkit-align-items: center;/*新版本*/
   align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html>

로그인 후 복사

Rendering:

CSS에서 수직 센터링을 설정하는 방법

2. Flex 레이아웃 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
.child{
background: #93BC49;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
</style>
</head>
<body>
<div class="box">
    <div class="child">css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中</div>
</div>
</body>
</html>

로그인 후 복사

Rendering:

(동영상 공유 학습:

css 동영상 튜토리얼

)

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