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

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

不言

Libérer： 2018-08-09 17:11:47

original

2584 Les gens l'ont consulté

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>

Copier après la connexion

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!