Maison > Article > interface Web > Comment réaliser un centrage vertical et horizontal en CSS lorsque la taille de l'élément n'est pas connue (code)

Comment réaliser un centrage vertical et horizontal en CSS lorsque la taille de l'élément n'est pas connue (code)

不言original: 2018-08-09 17:11:472584parcourir

Le contenu de cet article explique comment réaliser un centrage vertical et horizontal (code) d'éléments de taille inconnue en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Idée : Positionnez l'élément enfant de manière absolue, 50 % à partir du haut, 50 % à partir de la gauche, puis utilisez css3 transform:translate(-50%; -50%)
Avantages : Haut de gamme , peut être utilisé dans le noyau du webkit Inconvénients de l'utilisation de
dans les navigateurs : L'attribut transform n'est pas pris en charge sous IE9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
}
.parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
}
</style>
<body>
<p class="parent3">
        <p class="child">hello world-3</p>
    </p>
</body>
</html>

Recommandations associées :

Exemples de code CSS sélecteurs et codes de priorité CSS Exemple

Quand il y a trop de mots sur la page, comment utiliser le CSS pour que la partie en excès affiche des ellipses ? (Démonstration de code simple/multiligne)

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!

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：Exemples de code pour les sélecteurs CSS et exemples de code pour les priorités CSSArticle suivant：Exemples de code pour les sélecteurs CSS et exemples de code pour les priorités CSS

Articles Liés

Voir plus