图片放在div中间（图片在div中居中）

要将一张图片垂直和水平居中在一个 <div> 元素中    
    
    
    
，你可以使用以下 CSS 样式：

div { display: flex; justify-content: center; align-items: center; } img { max-width: 100%; max-height: 100%; }

这里   


     


     


     


  ，display: flex; 声明了 <div> 元素是一个 Flexbox 容器



 




 




 




 
，justify-content: center; 和 align-items: center; 使得 Flexbox 容器的内容垂直和水平居中对齐  
    
    
    
  。img 元素的 max-width 和 max-height 样式保证了图片的尺寸不会超过容器的大小   

   

   

   

，从而可以完整地显示在容器中

     


     


     


     
。

另外    

     

     

     

 ，你也可以使用 text-align: center; 将图片水平居中




  




  




  




  ，然后通过设置 line-height 与容器高度相等来使图片垂直居中 




 




 




 




。例如：

div { text-align: center; height: 300px; line-height: 300px; } img { vertical-align: middle; }

这里  


  


  


  


，text-align: center; 让图片水平居中     
     
     
     
，height 声明了容器的高度




   




   




   




   ，line-height 使得行高等于容器的高度
 



 



 



 


，从而使得图片垂直居中  

   

   

   

 。vertical-align: middle; 则是为了解决图片与行基线对齐的问题

     

     

     

     。