Der Inhalt dieses Artikels befasst sich mit der vertikalen und horizontalen Zentrierung (Code) von Elementen unbekannter Größe. Ich hoffe, dass er für Sie hilfreich ist .
Idee: Positionieren Sie das untergeordnete Element absolut, 50 % von oben, 50 % von links, und verwenden Sie dann css3 transform:translate(-50%; -50%)
Vorteile: High-End , kann im Webkit-Kernel verwendet werden. Nachteile der Verwendung von
in Browsern: Das Transformationsattribut wird unter IE9 nicht unterstützt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
position: relative;
height:300px;
width: 300px;
background: #FD0C70;
}
.parent3 .child{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
</style>
<body>
<p class="parent3">
<p class="child">hello world-3</p>
</p>
</body>
</html>Verwandte Empfehlungen:
Codebeispiele für CSS-Selektoren und Codebeispiele für CSS-Priorität
Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine vertikale und horizontale Zentrierung in CSS, wenn die Größe des Elements nicht bekannt ist (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
