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

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>

Code XML/HTMLCopier le contenu dans le presse-papiers

1. e12939baec5b47638ced02c90ae39940Texte de test a7447e9e15348813b597b50fafc8734e

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 f5d188ed2c074f8b944552db028f98a1 🎜>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>

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

[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>

<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>

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>

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

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>

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

【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>

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

【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>

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

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

[ 1] Utilisez margin:auto

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

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

【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>

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

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!