Heim > Artikel > Web-Frontend > So legen Sie die vertikale Zentrierung in CSS fest
So legen Sie die vertikale Zentrierung in CSS fest
- 青灯夜游Original
- 2021-04-21 17:08:2158414Durchsuche
So legen Sie die vertikale Zentrierung in CSS fest: 1. Verwenden Sie das Attribut „Zeilenhöhe“, um Text vertikal zu zentrieren. 2. Verwenden Sie das CSS3-Flex-Layout, um Text vertikal zu zentrieren. 3. Verwenden Sie die absolute Positionierung und Transformation, um Blockelemente vertikal zu zentrieren Flex Das Layout zentriert Blockelemente vertikal.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
css legt fest, dass der Text vertikal zentriert ist.
1. Zeilenhöhe sorgt dafür, dass der Text vertikal zentriert wird horizontal und vertikal
2. Das Flex-Layout von CSS3 macht Text vertikal zentriert
<!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>Rendering:
css legt fest, dass Blockelemente vertikal zentriert sind
1. unbekannte Elementhöhe) 
Wenn wir die Höhe des Elements nicht kennen, müssen wir das Element zuerst in der Mitte des Containers positionieren und dann das Transformationsattribut von transform verwenden, um die Mitte des Elements mit zusammenzubringen die Mitte des übergeordneten Containers, um eine vertikale Zentrierung zu erreichen: <!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:
2. Verwenden Sie das Flex-Layout
<!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-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo legen Sie die vertikale Zentrierung in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!