Heim > Artikel > Web-Frontend > So erreichen Sie eine vertikale und horizontale Zentrierung in CSS, wenn die Größe des Elements nicht bekannt ist (Code)

So erreichen Sie eine vertikale und horizontale Zentrierung in CSS, wenn die Größe des Elements nicht bekannt ist (Code)

不言Original: 2018-08-09 17:11:472546Durchsuche

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

Wie kann ich CSS verwenden, um Auslassungspunkte im überschüssigen Teil anzuzeigen, wenn die Seite zu viele Wörter enthält? (Demonstration von ein-/mehrzeiligem Code)

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!

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：Codebeispiele für CSS-Selektoren und Codebeispiele für CSS-PrioritätenNächster Artikel：Codebeispiele für CSS-Selektoren und Codebeispiele für CSS-Prioritäten

In Verbindung stehende Artikel

Mehr sehen