使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法？

最新推荐文章于 2020-01-02 09:24:57 发布

原创最新推荐文章于 2020-01-02 09:24:57 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #ie

web前端css 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了在不同浏览器环境下解决图片垂直居中问题的方法，包括CSS hack、使用table属性、引入额外容器等技巧，并讨论了各种方法的适用场景和注意事项。

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

解决这个问题有多种方法

1.使用css hack 处理ie6下的问题。

2.嵌入其它标签使其垂直居中。

方法一：

.box {
            /*非IE的主流浏览器识别的垂直居中的方法*/
            display: table-cell;
            vertical-align: middle; /*设置水平居中*/
            text-align: center; /* 针对IE的Hack */
            *display: block;
            *font-size: 175px; /*约为高度的0.873，200*0.873 约为175*/
            *font-family: Arial; /*防止非utf-8引起的hack失效问题，如gbk编码*/
            width: 200px;
            height: 200px;
            border: 1px solid #eee;
        }
        .box img {
            /*设置图片垂直居中*/
            vertical-align: middle;
        }

这种写法可以实现，有一种情况是："box"如果是浮动元素的话{float：left}，这个方法就不灵验了！

可以给img标签外加一个容器，和浮动float就木有关系了。

.box {
            /*非IE的主流浏览器识别的垂直居中的方法*/
            display: table;
            text-align: center; /* 针对IE的Hack */
            width: 200px;
            height: 200px;
            border: 1px solid #eee;
        }

.box span{

display:table-cell;

vertical-align:middle;

}

方法二：

如果把文字去掉的话，图片不会垂直居中。

此种方法图片的垂直居中是以“基线”垂直居中，因为line-height的存在，图片默认的基线是底部,img需要给一个属性vertical-align:middle;

方法三：

.img_v {

display:table-cell !important;

display:block;

position:static !important;

position:relative;

overflow:hidden;

width:400px;

height:400px;

border:1px solid #000;

vertical-align:middle;

text-align:center;

}

.img_v p {

display:table-cell !important;

display:block;

margin:0;

position:static !important;

position:absolute;

top:50%;

left:50%;

width:400px;

margin-left:auto;

margin-right:auto;

}

.img_v img {

position:static !important;

position:relative;

top:auto !important;

top:-50%;

left:auto !important;

left:-50%;

}

</div>

方法四：

.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}
.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
.miao span img{border:dashed 1px green;}
</style>


<div class="miao">
<span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>
</div>

方法五：

<!DOCTYPE html>
<style type="text/css">

</style>

<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>