Heim > Artikel > Web-Frontend > Drei Methoden zur horizontalen und vertikalen Zentrierung absolut positionierter Elemente

Drei Methoden zur horizontalen und vertikalen Zentrierung absolut positionierter Elemente

php中世界最好的语言Original: 2018-03-22 15:26:525675Durchsuche

Dieses Mal zeige ich Ihnen drei Möglichkeiten, absolut positionierte Elemente horizontal und vertikal zu zentrieren Ein praktischer Fall, werfen wir einen Blick darauf.

1.css, um eine Zentrierung zu erreichen

Nachteile: Breite und Höhe des Elements müssen im Voraus bekannt sein.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%; top: 50%;
            border:1px solid #000;
            background:red;
            margin-top: -200px;    /* 高度的一半 */
            margin-left: -300px;    /* 宽度的一半 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

2. CSS3 erreicht horizontale und vertikale Zentrierung

Hinweis: Unabhängig von der Größe des Elements kann es zentriert werden . Diese Schreibmethode ist jedoch nur mit IE8 und höher kompatibel und kann auf mobilen Endgeräten ignoriert werden.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 50%;
            top: 50%;
            border:1px solid #000;
            background:red;
            transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

3. Marge: automatisch, um die Zentrierung zu erreichen

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website!

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 600px; 
            height: 400px;
            position: absolute; 
            left: 0;
            top: 0; 
            right: 0; 
            bottom: 0;
            border:1px solid #000;
            background:red;
            margin: auto;    /* 有了这个就自动居中了 */
        }
    </style>
</head>
<body>
    <p class="box">
    </p>
</body>
</html>

Empfohlene Lektüre:

Detaillierte Erläuterung des dynamischen Ladens von CSS

Detaillierte Erläuterung des Prozesses der fächerförmigen Implementierung animiertes Menü in CSS3

So verwenden Sie die Webkit-tap-highlight-color-Eigenschaft von CSS3

Das obige ist der detaillierte Inhalt vonDrei Methoden zur horizontalen und vertikalen Zentrierung absolut positionierter Elemente. 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：Feste linke Seite, adaptives Layout auf der rechten SeiteNächster Artikel：Feste linke Seite, adaptives Layout auf der rechten Seite

In Verbindung stehende Artikel

Mehr sehen