Partagez 7 techniques pour réaliser le centrage vertical CSS (avec code)

La demande de centrage vertical du CSS sur les pages Web n'a jamais cessé, et sa difficulté n'a jamais été facile. Après les recherches de chaque développeur, on dit qu'il existe près de dix techniques de centrage vertical pour CSS. Mais c'est encore peu. Certaines entreprises considèrent même les compétences de centrage vertical CSS comme des questions d'entretien. Son importance est évidente. Aujourd'hui, je vais vous faire découvrir les différentes manières de centrer verticalement CSS.

1. Hauteur de ligne

Scénarios applicables : technique de centrage vertical pour le texte sur une seule ligne

Cette méthode devrait être celle que la plupart des gens connaissent , et est couramment utilisé dans le texte sur une seule ligne. La manière la plus courante d'appliquer du texte consiste à utiliser des objets tels que des boutons ou des éléments tels que des listes déroulantes et des éléments de navigation. Le principe de cette méthode est qu'après avoir défini la hauteur de ligne d'une seule ligne de texte, le texte sera situé au milieu vertical de la hauteur de ligne. Grâce à ce principe, l'exigence de centrage vertical peut être facilement réalisée.

<div class="content">Lorem ipsam.</div>
.content{
  width: 400px;
  background: #ccc;
  line-height:100px;
  margin: auto;
}

2. Hauteur de ligne + bloc en ligne

Scénario applicable : Technique de centrage vertical pour plusieurs objets

Depuis peut Si vous utilisez la première méthode pour centrer verticalement les éléments de ligne, bien sûr, il n'y a aucune raison pour que vous ne puissiez pas faire plusieurs lignes ~ Mais vous devez traiter plusieurs éléments ou éléments multi-lignes comme un seul élément de ligne, nous devons donc multi- regroupez ces données Un calque, définissez-le sur inline-block et utilisez inline-block dans l'objet externe de l'objet inline-block au lieu du paramètre de hauteur, afin que l'objectif de centrage vertical puisse être atteint, afin que vos données y compris le titre et le contenu, il peut également être centré verticalement normalement.

<div class="box box2">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  line-height: 200px;
  text-align: center;
}
.box2 .content{
  display: inline-block;
  height: auto;
  line-height:1;
  width: 400px;
  background: #ccc;
}

3. :before + inline-block

Scénario applicable : technique de centrage vertical CSS pour plusieurs objets

:before La méthode d'écriture des éléments de pseudo-classe avec l'attribut inline-block doit être une technique de centrage vertical très traditionnelle. L'avantage de cette méthode est que l'élément enfant peut être centré sans définir spécifiquement la hauteur. Nous utiliserons le pseudo- :before. class pour le définir à 100 %. Avec un inline-block élevé et avec les éléments enfants qui doivent être centrés également définis sur inline-block, vous pouvez utiliser vertical-align:middle pour atteindre l'objectif de centrage vertical. La méthode était en fait une très bonne méthode verticale dans le passé. La solution de centrage ne doit traiter que le petit défaut de l'espace de 4 à 5 pixels entre les éléments de bloc en ligne, mais elle est également très pratique.

<h2>3.:before + inline-block</h2>
<div class="box box3">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;
}
.box::before{
  content:&#39;&#39;;
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}

4. Absolu + marge négative

Scénarios applicables : Techniques de centrage vertical pour texte multiligne

Qui dit absolu Le positionnement devrait-il être moins utilisé ? Amos pense qu'il n'y a aucun problème à utiliser moins et à utiliser plus. Le point clé est de savoir si vous l'utilisez correctement. Dans cet exemple, le positionnement absolu définira top:50% pour capturer 50% de la hauteur de l'espace, puis définira la marge. -top de l'élément centré. Réglez la hauteur sur la moitié négative, afin que l'élément puisse être centré. Cette méthode est-elle une méthode de centrage transmise depuis de nombreuses années ?

<h2>4.absolute + margin 負值</h2>
<div class="box box4">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.box4 .content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -35px;
}

5. Absolu + marge auto

Scénario applicable : technique de centrage vertical pour texte multiligne

Un autre positionnement absolu La solution de centrage vertical est un peu spéciale. Lorsque l'élément est défini sur un positionnement absolu, il ne peut pas capturer l'espace global disponible, donc margin:auto échouera. Mais lorsque vous définissez top:0;bottom :0;, l'élément positionné de manière absolue. a capturé l'espace disponible. À ce moment-là, votre margin:auto prendra effet (magique). Si votre élément positionné de manière absolue doit être centré horizontalement sur le calque parent, vous pouvez également définir Set left:0;right:0; permettez à l'élément positionné de manière absolue d'obtenir l'espace disponible, puis définissez margin-left et margin-right sur auto pour le centrer. Mais l'inconvénient de cette méthode est que votre élément positionné doit avoir une largeur et une hauteur fixes (le pourcentage compte aussi) afin d'être correctement centré.

<h2>5.absolute + translate(-50%, -50%)</h2>
<div class="box box5">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  position: relative;
}
.content{
  width: 400px;
  background: #ccc;
  height: 70px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

6. Affichage : tableau-cellule

Scénario applicable : technique de centrage vertical pour un texte multiligne

Cette astuce Je pense que les développeurs plus anciens auraient dû le voir. Bien sûr, c'est la première fois qu'un nouveau développeur comme moi le voit. Le principe de cette astuce est d'utiliser la propriété d'affichage CSS pour définir le div sur une cellule de tableau, donc vous. peut utiliser l'attribut d'alignement vertical qui prend en charge l'alignement des cellules de stockage pour centrer verticalement les informations

<h2>19.display: table-cell</h2>
<div class="box box19">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
    text-align: center;
    display: table-cell;
  vertical-align: middle;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

7. remplissage

Scénarios applicables : plusieurs lignes Conseils pour le centrage vertical du texte

Quoi ! Ceci est également considéré comme une technique de centrage vertical. Même ma grand-mère connaît cette méthode, n'est-ce pas

Oui, il s'agit bien d'une méthode de centrage vertical. On ne peut nier que cette méthode est vraiment trop simple, à tel point que The. les développeurs pensent que cette méthode ne peut pas être considérée comme une technique de centrage vertical, mais vous ne pouvez pas réfuter le fait que mes données sont effectivement centrées verticalement. Eh bien, considérez-moi simplement comme concave. Vous avez raison, d'accord. >

Résumé : Ce qui précède vous présente 7 techniques de centrage vertical CSS. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. . Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

<h2>22.padding</h2>
<div class="box box22">
  <div class="content">
    立马来看Amos实际完成的    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相册效果    </a>
    效果吧！別忘了拖拉一下窗口看看 RWD 效果喔！  </div>
</div>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: auto;
  padding: 50px 0;
}
.content{
  width: 400px;
  background: #ccc;
  margin: auto;
}

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!