Trois méthodes pour centrer horizontalement et verticalement des éléments en position absolue-tutoriel CSS-php.cn

Trois méthodes pour centrer horizontalement et verticalement des éléments en position absolue

php中世界最好的语言

Libérer： 2018-03-22 15:26:52

original

5640 Les gens l'ont consulté

Cette fois, je vais vous présenter trois façons de centrer horizontalement et verticalement des éléments en position absolue. Quelles sont les précautionspour obtenir un centrage horizontal et vertical d'éléments en position absolue ? un cas pratique, jetons un oeil.

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 : Quelle que soit la taille de l'élément, 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 : auto pour réaliser le centrage

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux choses plus excitantes. Autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée du chargement dynamique des CSS

Explication détaillée du processus de mise en œuvre en forme d'éventail menu animé en CSS3

Comment utiliser la propriété webkit-tap-highlight-color de CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!