Comment utiliser CSS pour centrer l'image verticalement et horizontalement ?

Centrage horizontal des images CSS

Utiliser margin: 0 auto pour réaliser le centrage de l'image consiste à ajouter une marge de style CSS: 0 auto à l'image comme suit:

<p style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="margin: 0 auto;" />
</p>

Utilisez l'horizontale attribut de centrage du texte text-align : center

<p style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="display: inline-block;" />
</p>

Centrage vertical de l'image CSS

Utilisez height == row height pour centrer verticalement l'image

Cette méthode ne peut être utilisé si vous connaissez la hauteur, le code est le suivant :

<p style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">   
<img alt="" src="jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />
</p>

Utiliser le tableau pour réaliser le centrage vertical des images

La méthode d'utilisation du tableau consiste à utiliser l'attribut de centrage vertical du tableau , le code est le suivant :

Utilisez display ici : table; et display: table-cell; pour simuler un tableau. Cette méthode n'est pas compatible avec IE67 et ne prend pas en charge display: table. n'avez pas besoin de prendre en charge IE67, vous pouvez utiliser

Inconvénients : Lorsque vous définissez display: table; ce qui peut modifier votre mise en page d'origine

<p style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">
<span style="display: table-cell; vertical-align: middle; ">
<img alt="" src="jgylogo3.gif" style="display: inline-block;" />
</span>
</p>

Utiliser le positionnement absolu pour centrer verticalement l'image

Si la largeur et la hauteur de l'image sont connues, cela peut être fait, le code est le suivant :

<p style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img alt="" src="jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</p>

Les terminaux mobiles peuvent utiliser la disposition flexible pour réaliser le centrage vertical des images CSS

Les terminaux mobiles ont généralement des versions de navigateur supérieures, vous pouvez donc utiliser en toute sécurité la mise en page flexible (la mise en page flexible fait référence à l'utilisation de la mise en page flexible CSS3). Le code de démonstration est le suivant :

css代码：
<style type="text/css">
        .ui-flex {            
        display: -webkit-box !important;            
        display: -webkit-flex !important;            
        display: -ms-flexbox !important;            
        display: flex !important;           
         -webkit-flex-wrap: wrap;            
         -ms-flex-wrap: wrap;            
         flex-wrap: wrap
        }       
         .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {           
          box-sizing: border-box
        }       
         .ui-flex.justify-center {            
         -webkit-box-pack: center;            
         -webkit-justify-content: center;            
         -ms-flex-pack: center;            
         justify-content: center
        }        
        .ui-flex.center {            
        -webkit-box-pack: center;            
        -webkit-justify-content: center;            
        -ms-flex-pack: center;            
        justify-content: center;           
         -webkit-box-align: center;           
          -webkit-align-items: center;           
           -ms-flex-align: center;            
           align-items: center
        }    
        </style>
        html代码：
<p class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;">
    <p class="cell">
	<img alt="" src="jgylogo3.gif" style="" />
    </p>
</p>

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!