Comment centrer des éléments en position absolue horizontalement et verticalement-tutoriel CSS-php.cn

Comment centrer des éléments en position absolue horizontalement et verticalement

高洛峰

Libérer： 2017-02-24 13:35:07

original

1301 Les gens l'ont consulté

Cet article présente principalement la méthode de centrage horizontal et vertical des éléments positionnés de manière absolue. Il existe 3 méthodes pour référence. Les amis qui en ont besoin peuvent y jeter un œil ensemble

1.css pour réaliser le centrage.

Inconvénients : Nécessité de connaître la largeur et la hauteur de l'élément à l'avance.

<!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>

Copier après la connexion

2. CSS3 réalise un centrage horizontal et vertical

Remarque : peu importe de l'élément Quelle que soit sa taille, il peut être centré. Cependant, cette méthode d'écriture n'est compatible qu'avec IE8 et supérieur et peut être ignorée sur les terminaux mobiles.

<!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>

Copier après la connexion

3. Marge : centrage automatique des outils

<!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>

Copier après la connexion

Pour plus d'articles sur les méthodes de centrage horizontal et vertical d'éléments positionnés de manière absolue, veuillez faire attention au site Web PHP chinois !