So zentrieren Sie horizontal und vertikal absolut positionierte Elemente-CSS-Tutorial-php.cn

So zentrieren Sie horizontal und vertikal absolut positionierte Elemente

高洛峰

Freigeben： 2017-02-24 13:35:07

Original

1301 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Methode der horizontalen und vertikalen Zentrierung absolut positionierter Elemente vorgestellt. Freunde, die sie benötigen, können sich gemeinsam 1.css ansehen, 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: Egal des Elements Unabhängig von der Größe 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. Rand: automatische Gerätezentrierung

Weitere verwandte Artikel zu horizontalen und vertikalen Zentrierungsmethoden für absolut positionierte Elemente finden Sie 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