不知道大小的图片在盒子中垂直居中

来源：互联网发布：VPN网络编辑：程序博客网时间：2024/05/01 23:40

1.使用display:table-cell

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><style type="text/css">div {    display:table-cell;    height:300px;    width:500px;    text-align:center;    border:1px solid #000;    vertical-align:middle    }</style><!--[if IE]><style type="text/css">i {    display:inline-block;    height:100%;    vertical-align:middle    }img {    vertical-align:middle    }</style><![endif]--><div><i></i>    <img src="http://www.baidu.com/img/logo.gif" alt=""/></div>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .box {                display: table-cell;                vertical-align: middle;                text-align: center;                *display: block;                *font-size: 175px;                *font-family: Arial;                width: 200px;                height: 200px;                border: 1px solid #eee;            }            .box img {                vertical-align: middle;            }        </style>    </head>    <body>        <div class="box">            <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />        </div>    </body></html>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            div{                background: url(img/footer_logo.png) center no-repeat;            }        </style>    </head>    <body>        <div style="width: 400px;height: 400px;"></div>    </body></html>

0 0