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

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

高洛峰
Libérer: 2017-02-24 13:35:07
original
1326 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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal