Explication détaillée de 5 idées CSS pour réaliser un centrage horizontal et vertical en même temps-tutoriel CSS-php.cn

L'éditeur suivant vous apportera une brève analyse de 5 idées pour réaliser un centrage horizontal et vertical en même temps à l'aide de CSS. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Le centrage horizontal et le centrage vertical ont été introduits séparément. introduire le centrage horizontal et vertical en même temps 5 idées

Idée 1 : text-align line-heightRéaliser le centrage horizontal et vertical du texte sur une seule ligne

<style>   
.test{   
    text-align: center;   
    line-height: 100px;   
}   
</style>

Copier après la connexion

Code XML/HTMLCopier le contenu dans le presse-papiers

<p classe="test" style=" couleur de fond : bleu clair;largeur : 200px;">Texte de test p>

Idée 2 : text-align vertical-align

【1】Définissez l'alignement du texte et l'alignement vertical sur l'élément parent, et définissez l'élément parent sur la table- cell et l'élément enfant en élément inline-block

[Remarque] S'il est compatible avec le navigateur IE7, modifiez la structure en structure

🎜>display:inline;zoom:1; pour obtenir en ligne- L'effet de bloc

<style>   
.parent{   
    display: table-cell;   
    text-align: center;   
    vertical-align: middle;   
}   
.child{   
    display: inline-block;   
}   
</style>

Copier après la connexion

<p class="parent" style="background-color: gray; width:200px; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copier après la connexion

[2] Si l'élément enfant est une image, table-cell ne peut pas être utilisée, mais son élément parent utilise la hauteur de ligne au lieu de la hauteur et la taille de police est définie sur 0. L'élément enfant lui-même définit vertical-align:middle

<style>   
.parent{   
    text-align: center;   
    line-height: 100px;   
    font-size: 0;   
}   
.child{   
    vertical-align: middle;   
}   
</style>

Copier après la connexion

<p class="parent" style="background-color: gray; width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</p>

Copier après la connexion

Trois idées : margin vertical-align　

Si vous souhaitez définir un alignement vertical dans l'élément parent, il doit être défini sur l'élément table-cell si vous souhaitez que margin:0 auto soit centré horizontalement ; bloquer le contenu de l'élément pour étendre la largeur, doit être défini comme élément de tableau. L'élément table peut être imbriqué à l'intérieur de l'élément tabel-cell, tout comme une cellule peut imbriquer un tableau

[Note] S'il est compatible avec le navigateur IE7, la structure doit être modifiée en

<style>   
.parent{   
    display:table-cell;   
    vertical-align: middle;   
}   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>

Copier après la connexion

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copier après la connexion

Idée 4 : Utilisation absolu

[1] Profitez de la fonctionnalité

box model des éléments positionnés de manière absolue et définissez margin:auto en fonction de l'attribut offset étant un déterminé value

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 0;   
    left: 0;   
    rightright: 0;   
    bottombottom: 0;   
    height: 50px;   
    width: 80px;   
    margin: auto;   
}   
</style>

Copier après la connexion

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copier après la connexion

【2】Utilisez l'attribut offset des éléments positionnés de manière absolue et la fonction translation()<🎜. > La fonction

propre décalage permet d'obtenir l'effet de centrage horizontal et vertical[Remarque] Le navigateur IE9 ne prend pas en charge

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    transform: translate(-50%,-50%);   
}   
</style>

Copier après la connexion

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copier après la connexion

【3】Lorsque la largeur et la hauteur de l'élément enfant sont connues, vous pouvez utiliser des valeurs de marge négatives pour obtenir l'effet de centrage horizontal et vertical

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    width: 80px;   
    height: 60px;   
    margin-left: -40px;   
    margin-top: -30px;   
}   
</style>

Copier après la connexion

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copier après la connexion

Idée 5 : Utiliser flex　[Remarque] Le navigateur IE9 ne prend pas en charge

[ 1] Utilisez margin:auto<🎜 sur les projets flexibles >

<style>   
.parent{   
    display: flex;   
}   
.child{   
    margin: auto;   
}   
</style>

Copier après la connexion

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copier après la connexion

【2】Utilisez l'alignement sur l'axe principal, justifiez le contenu et l'alignement sur l'axe transversal, les éléments d'alignement sur le conteneur évolutif

<style>   
.parent{   
    display: flex;   
    justify-content: center;   
    align-items: center;   
}   
</style>

Copier après la connexion

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Copier après la connexion

L'article ci-dessus analyse brièvement les 5 idées du CSS pour atteindre des objectifs horizontaux et centrage vertical en même temps. C'est tout le contenu que l'éditeur a partagé avec vous. J'espère qu'il pourra vous donner une référence, j'espère également que tout le monde soutiendra le site Web PHP chinois.

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!

Étiquettes associées：

css 水平垂直居中

source：php.cn

Article précédent：Description détaillée de l'utilisation du framework CSS Stylus Article suivant：Description de la méthode de positionnement utilisant l'attribut position en CSS

Déclaration de ce site Web

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

Derniers articles par auteur