图片垂直居中

最新推荐文章于 2022-06-14 10:42:07 发布

AI算法攻城狮

最新推荐文章于 2022-06-14 10:42:07 发布

阅读量824

点赞数

CC 4.0 BY-SA版权

分类专栏： # Html/CSS

本文链接：https://blog.youkuaiyun.com/jxq0816/article/details/51404539

Html/CSS 专栏收录该内容

32 篇文章 ¥99.90 ¥299.90

订阅专栏

本文介绍了如何使用CSS实现图片在容器内的垂直居中效果，包括使用display flex、CSS Grid、定位以及传统的margin auto方法。详细讲解了每种方法的适用场景和实现步骤，助你轻松解决网页布局难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" >   
    <head>   
    <title>未知大小图片在已知大小容器水平/垂直居中</title>   
    <mce:style type="text/css"><!--  
       
    .box {  
    /*非IE的主流浏览器识别的垂直居中的方法*/  
    display: table-cell;  
    vertical-align:middle;  
      
    /*设置水平居中*/  
    text-align:center;  
      
    /* 针对IE的Hack */  
    *display: block;  
    *font-size: 175px;/*约为高度的0.873，200*0.873

了解本专栏