HTML centre les éléments horizontalement et verticalement-tutoriel HTML-php.cn

HTML centre les éléments horizontalement et verticalement

高洛峰

Libérer： 2017-02-27 10:43:42

original

1060 Les gens l'ont consulté

Lorsque nous concevons la page, nous affichons souvent le p au centre et l'affichons horizontalement et verticalement par rapport à la fenêtre de la page, par exemple en centrant la fenêtre de connexion.

Jusqu'à présent, de nombreuses méthodes ont été explorées.

HTML :

<body>
    <p class="maxbox">
        <p class="minbox align-center"></p>
    </p>
</body>

Copier après la connexion

Rendu (les méthodes suivantes ont le même rendu) :

HTML centre les éléments horizontalement et verticalement

Le premier type : le positionnement absolu CSS

utilise principalement le positionnement absolu, puis utilise la marge pour s'ajuster à la position médiane.

Élément parent :

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Copier après la connexion

Élément enfant :

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Copier après la connexion

Alignement central vertical horizontal :

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    margin-left: -100px;   /*width/-2*/
    margin-top: -100px;    /*height/-2*/
}

Copier après la connexion

Deuxième type : positionnement absolu CSS Javascript/JQuery

Utilisez principalement le positionnement absolu, puis utilisez Javascript/JQuery pour vous ajuster à la position médiane. Par rapport à la première méthode, cette méthode améliore la flexibilité de la classe.

Élément parent :

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Copier après la connexion

Élément enfant :

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Copier après la connexion

Alignement central vertical horizontal :

.align-center{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
}

Copier après la connexion

JQuery :

$(function(){   
    $(".align-center").css(   
        {   
            "margin-left": ($(".align-center").width()/-2),   
            "margin-top": ($(".align-center").height()/-2)   
        }   
    );   
});

Copier après la connexion

Troisième type : déplacement de positionnement absolu CSS3

L'utilisation du positionnement absolu est la même que la transformation CSS3 : traduire L'effet peut également être obtenu.

Élément parent :

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Copier après la connexion

Élément enfant :

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Copier après la connexion

Alignement central vertical horizontal :

.align-center{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    -webkit-transform: translate(-50%, -50%);   
       -moz-transform: translate(-50%, -50%);   
            transform: translate(-50%, -50%);        /*向左向上位移*/
}

Copier après la connexion

Quatrième type : Flexbox : [Modèle de boîte de disposition télescopique]

Il est trop facile pour le modèle Flexbox de réaliser des éléments horizontaux et verticaux.

Vous devez modifier le code HTML ici :

<p class="maxbox align-center">
    <p class="minbox"></p>
</p>

Copier après la connexion

Élément parent :

.maxbox{   
    position: relative;   
    width: 500px;   
    height: 500px;   
    margin: 5px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Copier après la connexion

Élément enfant :

.minbox{   
    width: 200px;   
    height: 200px;   
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
}

Copier après la connexion

Alignement central horizontal et vertical :

.align-center{   
    display: flex;   
    display: -webkit-flex;       /*兼容问题*/
    justify-content: center;   
    align-items: center;    
}

Copier après la connexion

Comparaison de plusieurs méthodes :

Le premier CSS L'ajustement absolu de la marge de positionnement a une bonne compatibilité mais manque de flexibilité. Si de nombreuses cases doivent être centrées horizontalement et verticalement, des .align-center différents doivent être écrits en raison de leur largeur et de leur hauteur différentes.
Le second utilise un langage de script, qui présente une bonne compatibilité et compense les défauts du premier. L'effet du centrage horizontal et vertical ne sera pas affecté par les changements de largeur et de hauteur.
Le troisième utilise de nouvelles propriétés de CSS3 et est compatible avec IE10, Chrome, Firefox et Opera. La compatibilité n'est pas très bonne et l'effet de centrage horizontal et vertical ne sera pas affecté par les changements de largeur et de hauteur.
Grâce au modèle Flexbox, compatible avec Firefox, Opera et Chrome, IE est complètement anéanti. Cela n'affecte pas non plus l'effet de centrage horizontal et vertical en raison des changements de largeur et de hauteur.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Pour plus d'articles liés au HTML sur le centrage horizontal et vertical des éléments, veuillez faire attention au site Web PHP chinois !