Heim > Artikel > Web-Frontend > Wie stelle ich die vertikale Zentrierung in CSS ein?

Wie stelle ich die vertikale Zentrierung in CSS ein?

青灯夜游Original: 2018-09-08 13:42:5431319Durchsuche

Wenn wir die Front-End-Seite entwickeln, wird es Stellen geben, an denen der vertikale Zentrierungseffekt erforderlich ist, um die Seite schön zu gestalten. In diesem Kapitel erfahren Sie, wie Sie die vertikale Zentrierung mithilfe von CSS festlegen, und stellen verschiedene Methoden zum Festlegen der vertikalen Zentrierung von Text- und Div-Boxen im Detail vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Empfohlenes Handbuch: CSS-Online-Handbuch

1: So stellen Sie ein up css Zentrieren Sie den Text vertikal

1. Zentrieren Sie den Text vertikal

<!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>

Rendering:

Wie stelle ich die vertikale Zentrierung in CSS ein?

Dadurch kann der Text im Div horizontal und vertikal zentriert werden

2. CSS3-Flex-Layout, um den Text vertikal zu zentrieren

<!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:

Wie stelle ich die vertikale Zentrierung in CSS ein?

Empfohlene verwandte Artikel:
1.So erzielen Sie den vertikalen Zentrierungseffekt von Div
2.div-Tag: Implementierung der horizontalen Zentrierung und vertikalen Zentrierung (mit Code)
Ähnliche Videoempfehlungen:
1.CSS-Video-Tutorial – Jade Girl Heart Sutra Edition

2: So stellen Sie ein up div box with css Den Container (Blockelement) vertikal zentrieren

1. Verwenden Sie absolute Positionierung und negative Ränder, um das Blockebenenelement vertikal zu zentrieren (Wir kennen bereits die Höhe des Elements)

Wenn wir die Höhe des Elements kennen, können wir eine vertikale Zentrierung wie folgt erreichen:

<!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>

Rendering:

Wie stelle ich die vertikale Zentrierung in CSS ein?

Diese Methode ist gut kompatibel , aber es gibt einen kleinen Nachteil: Dies muss im Voraus erfolgen. Kennen Sie die Größe des zu zentrierenden Elements auf Blockebene, da sonst die vertikale Zentrierung nicht genau erreicht werden kann.

2. Verwenden Sie die absolute Positionierung und transformieren Sie (unbekannte Elementhöhe)

Wenn wir die Höhe des Elements nicht kennen, dann tun wir Sie müssen zuerst das Element ändern. Positionieren Sie die Mitte des Containers und verwenden Sie dann das Übersetzungsattribut von transform, um die Mitte des Elements mit der Mitte des übergeordneten Containers in Übereinstimmung zu bringen und eine vertikale Zentrierung zu erreichen:

<!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:

Wie stelle ich die vertikale Zentrierung in CSS ein?

Ein ganz offensichtlicher Vorteil dieser Methode besteht darin, dass Sie die Größe des zentrierten Elements nicht im Voraus kennen müssen, da der Prozentsatz des Übersetzungsversatzes in der Transformation beträgt relativ zur Größe des Elements selbst.

3. Absolute Positionierung kombiniert mit Rand: automatisch

<!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:

Wie stelle ich die vertikale Zentrierung in CSS ein?

Diese Art Die Methode muss zunächst das Element so positionieren, dass es absolut relativ zum übergeordneten Element vertikal zentriert ist, die oberen und unteren Werte auf gleiche Werte setzen, unabhängig davon, auf welchen Wert sie eingestellt sind, solange sie gleich sind auf automatisch zentriert werden, sodass eine vertikale Zentrierung erreicht werden kann. Die Breite und Höhe des zentrierten Elements müssen nicht festgelegt werden. Wenn sie jedoch nicht festgelegt werden, muss es sich um ein Element wie ein Bild handeln, das seine eigene Größe enthält, andernfalls kann es nicht implementiert werden.

4. Verwenden Sie Polsterung, um eine vertikale Zentrierung untergeordneter Elemente zu erreichen

<!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>

Rendering:

Wie stelle ich die vertikale Zentrierung in CSS ein?

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

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>

效果图：

Wie stelle ich die vertikale Zentrierung in CSS ein?

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

Das obige ist der detaillierte Inhalt vonWie stelle ich die vertikale Zentrierung in CSS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS verwendet @media-Medienabfragen für responsives Design. Was sind Medienabfragen?Nächster Artikel：CSS verwendet @media-Medienabfragen für responsives Design. Was sind Medienabfragen?

In Verbindung stehende Artikel

Mehr sehen