Méthode de centrage horizontal et vertical

Cette fois je vais vous présenter la méthode de centrage horizontal et vertical Quelles sont les précautions pour le centrage horizontal et vertical Voici un cas pratique, jetons un oeil.

1. Centrage des éléments hors du flux de documents

Méthode 1 : margin:auto méthode

Code CSS :

p{
      width: 400px;
      height: 400px;
      position: relative;
      border: 1px solid #465468;
 }
 img{
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

Code HTML :

<p>
   <img src="mm.jpg">
</p>

Rendu :

Quand Quand un élément est positionné de manière absolue , il sera positionné en fonction du premier élément ancêtre qui n'est pas positionné statiquement, donc l'img ici est positionné en fonction du p externe.

Méthode 2 : Méthode de marge négative

Code CSS :

.container{
      width: 500px;
      height: 400px;
      border: 2px solid #379;
      position: relative;
 }
 .inner{
      width: 480px;
      height: 380px;
      background-color: #746;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -190px; /*height的一半*/
      margin-left: -240px; /*width的一半*/
 }

Code HTML :

<p class="container">
    <p class="inner"></p>
</p>

Rendu :

Ici, nous utilisons d'abord top:50% et left:50% pour déplacer l'origine des coordonnées internes (coin supérieur gauche) vers le centre de le conteneur , puis utilisez une marge négative pour le décaler vers la gauche de la moitié de sa largeur, puis décalez-le vers le haut de la moitié de sa hauteur, de sorte que le point central de l'intérieur soit aligné avec le point central du conteneur.

2. Centrage des éléments qui ne sont pas hors du flux documentaire

Méthode 1 : méthode table-cell

Code CSS :

p{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
img{
    vertical-align: middle;
}

Code HTML :

<p>
    <img src="mm.jpg">
</p>

Rendu :

Alignement vertical : le milieu sur p contrôle le centrage dans la direction verticale, tandis que l'alignement du texte : le centre contrôle la direction horizontale. Un fait intéressant est que lorsque nous supprimons le vertical-align: middle de img, cela ressemble à ceci :

Il est toujours centré ! Est-ce vraiment centré ?

On voit que l'image s'est un peu déplacée vers le haut et n'est plus centrée dans le sens vertical. Pourquoi? Je ne sais pas pourquoi, si tu sais, peux-tu me le dire ?

Mais si on change l'image en texte :

Code CSS :

p{
    border: 3px solid #555;
    width: 300px;
    height: 200px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
span{
    vertical-align: middle;
}

Code HTML :

<p>
    <span>这是放在span中的文字，通过外层p设置display: table-cell以及vertical-align: middle实现垂直居中。</span>
</p>

Rendu :

Lorsque nous supprimons le vertical-align: middle of span, cela ressemble à ceci :

Voyez-vous la différence ? Le texte a un interligne plus petit. Si vous exécutez le code sur votre ordinateur, vous constaterez que ces lignes de texte sont déplacées vers le milieu et ne se sont pas déplacées vers le haut comme sur l'image. J'essaie également de comprendre ce qui se passe. Si vous connaissez la raison, dites-le-moi.

Méthode 2 : Méthode de boîte flexible

Code CSS :

.container{
      width: 300px;
      height: 200px;
      border: 3px solid #546461;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
 }
 .inner{
      border: 3px solid #458761;
      padding: 20px;
 }

Code HTML :

<p class="container">
    <p class="inner">
        我在容器中水平垂直居中
    </p>
</p>

Rendu :

align-items contrôle le centrage vertical et justifié-content contrôle le centrage horizontal. Il s'agit d'une nouvelle méthode de CSS3. L'état de prise en charge du navigateur est le suivant :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. , veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Utilisez du transparent pour créer des triangles

Définissez des éléments translucides

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!