So legen Sie die vertikale Zentrierung in CSS fest-CSS-Tutorial-php.cn

So legen Sie die vertikale Zentrierung in CSS fest

青灯夜游

Freigeben： 2023-01-05 16:10:27

Original

58449 Leute haben es durchsucht

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.

So legen Sie die vertikale Zentrierung in CSS fest

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>

Nach dem Login kopieren

Rendering: So legen Sie die vertikale Zentrierung in CSS fest

css legt fest, dass Blockelemente vertikal zentriert sind

1. unbekannte Elementhöhe) So legen Sie die vertikale Zentrierung in CSS fest

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Rendering:

So legen Sie die vertikale Zentrierung in CSS fest

(Lernvideo-Sharing:

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!