Drei Methoden zur horizontalen und vertikalen Zentrierung absolut positionierter Elemente-CSS-Tutorial-php.cn

Drei Methoden zur horizontalen und vertikalen Zentrierung absolut positionierter Elemente

php中世界最好的语言

Freigeben： 2018-03-22 15:26:52

Original

5687 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!