Heim > Artikel > Web-Frontend > So zentrieren Sie horizontal und vertikal absolut positionierte Elemente

So zentrieren Sie horizontal und vertikal absolut positionierte Elemente

高洛峰Original: 2017-02-24 13:35:071304Durchsuche

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>

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>

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>

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：Der Rahmen dreht sich, wenn die Maus mit CSS3 bewegt wirdNächster Artikel：Der Rahmen dreht sich, wenn die Maus mit CSS3 bewegt wird

In Verbindung stehende Artikel

Mehr sehen