Introduction à plusieurs méthodes pour réaliser un centrage horizontal et vertical avec CSS

CSS implémente l'alignement central horizontal et vertical

Il est relativement simple d'implémenter le centrage horizontal en CSS. Généralement, si vous souhaitez obtenir un centrage horizontal des éléments en ligne ou des éléments de bloc en ligne, vous pouvez définir text-align: center sur son élément parent au niveau du bloc ; si vous souhaitez obtenir un centrage horizontal des éléments au niveau du bloc, vous pouvez définir magin: auto. Et si vous souhaitez obtenir un alignement central vertical, cela n’est peut-être pas facile.

Ci-dessous, j'ai résumé quelques méthodes pour obtenir un alignement central horizontal et vertical. S'il y a des lacunes, veuillez les signaler.

La mise en œuvre du centrage horizontal et vertical peut être divisée en deux contenus principaux, l'un est la hauteur change de manière adaptative avec le contenu, l'autre est une hauteur fixe.

Hauteur fixe pour obtenir un centrage horizontal et vertical

Méthode 1

La méthode la plus courante consiste à utiliser hauteur + hauteur de ligne, à définir la même valeur et à utiliser du texte- align Utilisez-le pour obtenir un alignement central horizontal et vertical du texte

<div class="container">Hello World！</div>

.container {
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    border: 1px solid red;
}

Inconvénients : hauteur fixe, impossible d'obtenir un alignement central vertical de deux lignes de texte

Méthode 2

Utilisez la méthode de positionnement absolu, utilisée avec des valeurs de marge négatives. Il peut obtenir l'effet de centrage horizontal et vertical des éléments.

<div class="container">Hello World！</div>

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

Bien sûr, vous pouvez utiliser la fonction calc de CSS3 pour simplifier le code CSS ci-dessus

.container {
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

Inconvénients : hauteur fixe, la hauteur ne peut pas s'adapter au contenu. L'élément sort du flux documentaire.

Méthode 3

Ajoutez une balise vide et faites flotter l'élément hors du flux de documents pour éviter d'affecter la disposition des autres éléments.

<div class="space"></div>
<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.space {
    float: left;
    height: 50%;
    margin-top: -150px;
}

.container {
    clear: both;
    height: 300px;
    border: 1px solid red;
    position: relative;
}

Inconvénients : le centrage vertical de cette manière nécessite une hauteur fixe et la hauteur adaptative du contenu ne peut pas être obtenue. Dans le même temps, des éléments div vides redondants apparaissent.

Implémentation adaptative en hauteur du centrage horizontal et vertical

Méthode 1

Il existe un attribut de transformation dans CSS3. Il existe une fonction de translation de mouvement sous cet attribut. paramètres. Si les deux paramètres sont des valeurs en pourcentage, le mouvement sera basé sur sa propre largeur et hauteur. Le mécanisme de mouvement de cette fonction est similaire à position:relative.

<div class="container">Hello World！</div>

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽度和高度的一半
    border: 1px solid red;
}

Avantages : Pas besoin de régler la hauteur. La hauteur s'adapte au contenu.
Inconvénient : Les éléments sont détachés du flux documentaire. Si l'élément à centrer dépasse déjà la hauteur de la fenêtre, son sommet sera rogné par la fenêtre.

Méthode 2

Nous savons que la marge peut être utilisée pour obtenir un alignement central horizontal, mais la raison pour laquelle la marge ne peut pas être utilisée pour obtenir un centrage vertical est que la valeur en pourcentage de la marge est calculée en fonction de largeur.

<div class="container">Hello World！</div>

.container {
    width: 300px;
    margin: 50% auto 0;
    border: 1px solid red;
    tarnsform: translateY(-50%);
}

Dans le code ci-dessus, puisque le pourcentage est calculé en fonction de la largeur de l'élément parent (l'élément parent à ce moment est l'élément body), les 50 % plus la valeur négative de traduire à cette fois, il n'est pas possible d'obtenir une disposition de centrage vertical.

Cependant, il existe un vh (viewport height) en CSS, qui équivaut à la hauteur de document.body.clientHeight ou document.documentElement.clientHeight dans le DOM 1vh=1%, c'est-à-dire que 1vh est égal à 1. % de la hauteur de la fenêtre. Pour les problèmes de compatibilité du navigateur avec l'unité vh, voir vh. Par conséquent, le code ci-dessus peut être modifié comme suit pour obtenir l'effet de centrage horizontal et vertical.

<div class="container">Hello World！</div>

.container {
    width: 300px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border: 1px solid red;
}

Méthode 3

Il existe une mise en page flexible (modèle de boîte de mise en page rétractable, également appelé modèle de boîte de mise en page élastique) en CSS3. Pour ceux qui sont familiers avec flex, utilisez flex pour obtenir une horizontalité. et centrage vertical Rien de plus simple.

<div class="container">
    <div class="inner">
        <p>hello world!</p>
    </div>
</div>

.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}

Lorsque nous créons l'élément parent display: flex, margin: auto peut non seulement être centré horizontalement, mais aussi verticalement. En effet, les marges automatiques divisent l'espace supplémentaire en deux horizontalement ou verticalement.

Bien entendu, vous pouvez également utiliser justify-content: center pour définir l'alignement de l'axe principal de l'élément flexible, et align-items: center pour définir l'alignement de l'axe latéral de l'élément flexible.

<div class="container">
    <div class="inner">
        <p>hello world</p>
    </div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Méthode 4

Vous pouvez utiliser display: table pour simuler un tableau, et définir display: table-cell sur l'élément enfant, le laisser devenir une cellule du tableau et définir vertical-align: middle en même temps, vous pouvez obtenir une disposition centrée verticalement

<div class="container">
    <div class="inner">
        hello world！
    </div>
</div>

.container {
    display: table;         /* 让div以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}

En utilisant cette méthode, il n'est pas nécessaire de fixer la hauteur. Il vous suffit de donner n'importe quelle hauteur ou aucune hauteur pour obtenir l'effet de centrage horizontal et vertical.

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!