Maison > Article > interface Web > Comment centrer des éléments en position absolue horizontalement et verticalement

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

高洛峰original: 2017-02-24 13:35:071304parcourir

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>

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>

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>

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La bordure pivote lorsque la souris est survolée en utilisant CSS3Article suivant：La bordure pivote lorsque la souris est survolée en utilisant CSS3

Articles Liés

Voir plus