Comment réaliser un centrage vertical et horizontal en CSS

Cet article présente principalement comment réaliser un centrage vertical et horizontal en CSS. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Avant-propos

. Entretien en cours On nous demande souvent comment utiliser CSS pour centrer un élément verticalement et horizontalement. Surtout lorsqu'il s'agit de questions de tests écrits, cette question apparaît plus fréquemment. Bien sûr, dans nos vies, il y a souvent des exigences de centrage horizontal vertical.

Trois façons d'obtenir un centrage vertical et horizontal avec CSS

1 Éléments dans l'affichage du conteneur : inline/inline-block

Dans ce cas, il est plus facile de définir. le conteneur directement Text-align peut réaliser un centrage horizontal des éléments de contenu. Pour définir le centrage vertical, vous devez définir la hauteur du conteneur, puis définir la hauteur de ligne facile === hauteur, comme suit :

     <p class="container">
        <span>this is text</span>
     </p>

    .container{    
        text-align: center;        
        height: 50px;        
        background: green;        
        line-height: 50px;    
        }

2. L'élément display:block dans le conteneur, et la largeur et la hauteur de l'élément sont connus

Dans ce cas, nous utilisons l'attribut position combiné avec la définition du décalage pour obtenir ce. Définissez d'abord la position du conteneur : relative, définissez la position de l'élément sur absolue, puis définissez le décalage de l'élément (.inner-box) en haut, à gauche, en marge-en haut, en marge-gauche, où haut et gauche sont définis sur 50 % et marge Le décalage de -top/margin-left est la moitié de la hauteur/largeur de l'élément lui-même, ce qui est une valeur négative.

Le code est le suivant :

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

    .container {        
        height: 200px;        
        width: 200px;        
        background: pink;        
        position: relative;    
        }

    .inner-box {       
     position: absolute;        
     top: 50%;        
     left: 50%;        
     margin-top: -50px;        
     margin-left: -50px;        
     height: 100px;        
     width: 100px;        
     background: green;    
     }

3. L'élément dans le conteneur display:block, ainsi que la largeur et la hauteur de l'élément sont inconnus

Cette méthode est similaire à la deuxième méthode, mais la différence est que l'effet ne peut pas être obtenu en définissant le décalage marge-haut/gauche, car la largeur et la hauteur des éléments dans le conteneur sont inconnues. Cette fois, nous définissons left/top/bottom/right:0, puis margin:auto.
Le code est le suivant :

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

    .container {        
        height: 200px;            
        width: 200px;            
        background: pink;            
        position: relative;        
        }

    .inner-box {     
       position: absolute;        
       height: 100px;        
       width: 100px;        
       top: 0;        
       right: 0;        
       left: 0;        
       bottom: 0;        
       margin: auto;        
       background: green;    
       }

Afterword

Il existe de nombreuses façons d'obtenir un centrage vertical et horizontal. Vous pouvez également définir une traduction ou utiliser une disposition flexible, mais. ce qui précède Les différentes méthodes écrites sont relativement compatibles. S'il y a des lacunes, n'hésitez pas à les signaler.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez CSS pour implémenter diverses méthodes de centrage

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!