집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 수직 센터링을 설정하는 방법은 무엇입니까?

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

青灯夜游원래의: 2018-09-08 13:42:5431375검색

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

추천 매뉴얼: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS는 반응형 디자인을 위해 @media 미디어 쿼리를 사용합니다.다음 기사：CSS는 반응형 디자인을 위해 @media 미디어 쿼리를 사용합니다.