Heim > Artikel > Web-Frontend > Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?
Welche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?
- 王林nach vorne
- 2020-03-23 10:31:132631Durchsuche
Die Methode zur vertikalen Zentrierung in CSS ist wie folgt:
1. Diese Methode eignet sich für reine Text >
<!-- css -->
<style>
.parents {
height: 400px;
line-height: 400px;
width: 400px;
border: 1px solid red;
text-align: center;
}
.child {
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body>Effekt: 
CSS-Tutorial)
2. Durch Festlegen des Relativen Positionierung des übergeordneten Containers, die absolute Positionierung des untergeordneten Containers wird auf der Ebene festgelegt und die Beschriftung wird durch den Rand adaptiv zentriert.<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
position: relative;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: blue;
/* 四个方向设置为0, 然后通过margin为auto自适应居中 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body> Effekt: 
4. Das übergeordnete Element legt die relative Positionierung fest und das untergeordnete Element legt die absolute Positionierung fest. Dies wird durch die Verschiebungstransformation erreicht. 
5 box und legt die zugehörigen Eigenschaften der elastischen Box fest;
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
display: flex;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #333;
background-color: yellow;
margin: auto;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body> Effekt: 
6. Rasterlayout, das übergeordnete Element wird in eine Tabellenform umgewandelt und Anschließend wird das Kind durch Festlegen von Inline- oder Inline-Blöcken implementiert. (Es ist zu beachten, dass die Voraussetzung für die Verwendung von Vertical-Align: Middle Inline-Elemente und Elemente mit einem Anzeigewert von Table-Cell sind.)
Effekt: 
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
position: relative;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css布局,实现垂直居中</span>
</div>
</body>Empfohlene verwandte Video-Tutorials:
CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, um eine vertikale Zentrierung in CSS zu erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!