未知宽高图片垂直居中的三种方法_如何居中不知宽高的图片-CSDN博客

本文介绍了三种实现图片在未知高度的容器中垂直居中的方法，包括利用table布局、插入空标签以及使用伪类属性，同时提供了已知宽高图片垂直居中的解决方案。

方法一：

将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>方法1 - 未知高度的图片垂直居中 - www.cleanthem.com</title>
<style type="text/css">
body {
    height:100%;
}
#box{
    width:500px;height:400px;
    display:table;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#box span{
    display:table-cell;
    vertical-align:middle;
}
#box img{
    border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">?
#box{
    position:relative;
    overflow:hidden;
}
#box span{
    position:absolute;
    left:50%;top:50%;
}
#box img{
    position:relative;
    left:-50%;top:-50%;
}
</style>
<![endif]-->

</head>

<body>
<div id="box">
    <span><img src="images/demo_zl.png" alt="" /></span>
</div>

</body>
</html>

方法二：

标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>方法2 - 未知高度的图片垂直居中 - www.cleanthem.com</title>

<style type="text/css">
body {
    height:100%;
}
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">?
#box i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
#box img {
    vertical-align:middle
    }
</style>
<![endif]-->



</head>

<body>
<div id="box">
    <i></i><img src="images/demo_zl.png" alt="" />
</div>


</body>
</html>

方法三：

在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>方法3 - 未知高度的图片垂直居中 - www.cleanthem.com</title>

<style type="text/css">
body {
    height:100%;
}
#box{
    width:500px;height:400px;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
#box p{
    width:500px;height:400px;
    line-height:400px;  /* 行高等于高度 */
}

/* 兼容标准浏览器 */
#box p:before{
    content:".";  /* 具体的值与垂直居中无关，尽可能的节省字符 */
    margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */
    visibility:hidden;  /*设置成隐藏元素*/
}

#box p img{
    *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;
    border:1px solid #ccc;
}
</style>

</head>

<body>
<div id="box">
    <p><img src="images/demo_zl.png" alt="" /></p>
</div>

</body>
</html>

以下是已知宽高的图片垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <style>

        #container{

            width: 1000px;

            height: 800px;

            border: 2px solid green;

            background: #BECECB;

            margin: 0 auto;

}

        img{

            height: 480px;

            width: 320px;

            position: absolute;     /* 绝对定位 */

            top: 50%;                /* 距离顶部为50% */

            left: 50%;                /* 距离左边部为50% */

            margin: -240px -160px;    /* 减去自身的高度与宽度 */

}

    </style>

</head>

<body>

    <div id="container">

        <img src="ccc.jpg" alt="ccc"  />

    </div>

</body>

</html>