CSS에서 수직 센터링을 설정하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS에서 수직 센터링을 설정하는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2019-11-23 13:40:38

원래의

31319명이 탐색했습니다.

프런트엔드 페이지를 개발하다 보면 페이지를 아름답게 만들기 위해 수직 센터링 효과가 필요한 곳이 있을 겁니다. 이번 장에서는 CSS를 이용하여 수직 센터링을 설정하는 방법을 알아보고, 텍스트와 div 박스의 수직 센터링을 설정하는 여러 가지 방법을 자세히 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

추천 매뉴얼: CSS 온라인 매뉴얼

CSS에서 수직 센터링을 설정하는 방법은 무엇입니까?

One: CSS에서 텍스트를 수직 중앙에 맞추는 방법

1. line-height는 텍스트를 수직 중앙에 맞춥니다.

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

로그인 후 복사

렌더링:

CSS에서 수직 센터링을 설정하는 방법은 무엇입니까?

이 방법으로 div의 텍스트를 가로 및 세로로 중앙에 배치할 수 있습니다

2. CSS3 플렉스 레이아웃은

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    line-height:300px;
			     /*设置为伸缩容器*/
			    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에서 수직 센터링을 설정하는 방법은 무엇입니까?

Di 달성 방법 v 수직 센터링 효과
2.div 태그: 가로 센터링 및 세로 센터링 구현(코드 포함)
관련 영상 추천:
1.CSS 영상 튜토리얼-옥소녀심경편

2: CSS에서 div 상자 컨테이너(블록 요소)를 수직 중앙에 설정하는 방법

1을 사용합니다. 절대 위치 지정 및 음수 여백 수직 중심 블록 수준 요소

(알려진 요소 높이)

요소의 높이를 알면 다음과 같이 수직 중심을 달성할 수 있습니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    position: relative;
			}
			.child{
				width: 150px;
			    height: 100px;
			    background: orange;
			    position: absolute;
			    top: 50%;
			    margin: -50px 0 0 0;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中</div>
		</div>
	</body>
</html>

로그인 후 복사

효과 그림:

이 방법은 호환성이 좋지만 작은 단점이 있습니다. 중심에 있는 블록 수준 요소의 크기를 미리 알아야 하며, 그렇지 않으면 수직 중심에 정확하게 맞출 수 없습니다. CSS에서 수직 센터링을 설정하는 방법은 무엇입니까?

2. 절대 위치 지정 및 변환 사용

(알 수 없는 요소 높이)

요소의 높이를 모르는 경우 먼저 요소를 컨테이너 중앙에 배치한 다음 다음을 사용해야 합니다. 요소를 번역하기 위한 변환의 번역 속성 중심이 상위 컨테이너의 중심과 일치하여 수직 중심 맞춤을 달성합니다.

<!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에서 수직 센터링을 설정하는 방법은 무엇입니까?

3. 여백과 결합된 절대 위치 지정: auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    position: relative;
			}
			.child{
				width: 200px;
                height: 100px;
				background: orange;
			    position: absolute;
			    top: 0;
			    bottom: 0;
			    margin: auto;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中...</div>
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

이 방법은 먼저 요소를 상위 요소를 기준으로 수직 중앙에 배치하고 위쪽과 아래쪽을 동일하게 설정해야 합니다. , 어떤 값을 설정하든 두 값이 동일하다면 중앙에 정렬할 요소의 여백을 자동으로 설정하여 수직 중앙 정렬이 가능하도록 합니다. 중앙에 배치되는 요소의 너비와 높이를 설정할 필요는 없으나, 설정하지 않으면 그림과 같이 자체 크기를 담고 있는 요소여야 하며, 그렇지 않으면 구현할 수 없습니다. CSS에서 수직 센터링을 설정하는 방법은 무엇입니까?

4. 패딩을 사용하여 하위 요소의 수직 중심 맞추기

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    background: #ddd;
			    padding: 100px 0;
			}
			.child{
				width: 200px;
                height: 100px;
				background: orange;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中了</div>
		</div>
	</body>
</html>

로그인 후 복사

렌더링:

这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。

5. 使用flex布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 垂直居中</title>
		<style>
			.box{
				width: 300px;
			    height: 300px;
			    background: #ddd;
			    display: flex;
			    flex-direction: column;
			    justify-content: center;
			}
			.child{
				width: 300px;
			    height: 100px;
			    background: #08BC67;
			    line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="child">css 垂直居中了--弹性布局</div>
		</div>
	</body>
</html>

로그인 후 복사

效果图：

CSS에서 수직 센터링을 설정하는 방법은 무엇입니까?

关于flex布局（弹性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下：
flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex;将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：
　　flex-start:：交叉轴的起点对齐；
　　flex-end：交叉轴的终点对齐；
　　center：交叉轴的中点对齐；
　　baseline：项目第一行文字的基线对齐；
　　stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。

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