CSS图片垂直居中方法整理集合

来源：互联网发布：诺基亚n9价格淘宝编辑：程序博客网时间：2024/05/01 19:10

转载地址: http://www.w3cfuns.com/thread-5595347-1-1.html

这个问题我们平时编码是时常会遇到，下面就把在网上看到的一些方法总结一些，已备不时之需：
一、用writing-mode实现未知高度替换元素垂直居中：

当writing-mode为tb-rl时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。

<!DOCTYPE html><html>        <head>                <meta charset="utf-8" />                <title>利用定位来显示垂直局中的图片</title>                <style type="text/css">                .miao {                        width: 500px;                        height: 220px;                        line-height: 220px;                        border: 1px solid;                        text-align: center;                }                .miao img {                        vertical-align: middle;                }                </style>                <!--[if IE 6]>                <style type="text/css">                .miao span {                        border: 1px solid red;                        height: 100%; /* 要保证和父元素高度一样才行 */                        writing-mode: tb-rl;                        vertical-align: middle;                }                </style>                <![endif]-->        </head>        <body>                <h1>固定高宽的容器中，图片垂直局中。</h1>                <p>使用的绝对定位和相对定位的方法</p>                <div class="miao">                         <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了                </div>                <hr />                <div class="miao">                         <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了                </div>                <hr />                <div class="miao">                         <span><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="Google" /></span>你知道的太多了                </div>        </body></html>

二、用display:table实现：

标准浏览器如 Mozilla, Opera, Safari 等.，可将父级元素显示方式设定为table(display: table;)，内部子元素定为 table-cell (display: table-cell)，通过 vertical-align 特性使其垂直居中，但非标准浏览器是不支持的。

<!DOCTYPE html><html>        <head>                <meta charset="utf-8" />                <title>利用定位来显示垂直局中的图片</title>                <style type="text/css">                .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>                <!--[if lte IE 7]>                <style type="text/css">                .miao { position: relative; overflow: hidden; }                .miao span { position: absolute; left: 50%; top: 50%; }                .miao span img { position: relative; left: -50%; top: -50%; }                </style>                <![endif]-->        </head>        <body>                <h1>固定高宽的容器中，图片垂直局中。</h1>                <p>绿色容器是span，目的是使自己的左上角与容器中心点对齐。红色是具体图片，再次设置负值使自己的中心点和父容器的中心点重合，最终达到垂直局中的目的。</p>                <div class="miao">                         <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>                </div>                <hr />                <div class="miao" style="width: 300px; height: 80px;">                         <span><img src="ttp://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>                </div>                <hr />                <div class="miao" style="width:500px;height:220px;">                         <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>                </div>        </body></html>

三、利用字体大小的方法：

<!DOCTYPE html><html>        <head>                <meta charset="utf-8" />                <title>利用字体大小实现图片垂直居中</title>                <style type="text/css">                * { margin: 0; padding: 0; }                div {                        width: 500px;                             text-align: center;                             border: 1px solid #f00;                             line-height: 500px;                        height: 500px;                        font-size: 500px;                     }                *>div {                        font-size: 12px;                     }                div img {                        vertical-align: middle;                }                </style>        </head>        <body>                <div>                        <img src="http://www.google.com/intl/en/images/logo.gif" alt="logo" />                </div>        </body></html>

四、display:inline-block方法：

<!DOCTYPE html><html>        <head>                <meta charset="utf-8" />                <title>display:inline-block方法实现图片垂直居中</title>                <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]-->        </head>        <body>                <div>                        <i></i>                        <img src="http://www.baidu.com/img/logo.gif" alt="logo" />                </div>        </body></html>

五、背景图方法：

<!DOCTYPE html><html>        <head>                <meta charset="utf-8" />                <title>最简单的方法——背景图</title>                <style type="text/css">                * { margin: 0; padding: 0; }                div {                        width: 500px;                        border: 1px solid #f00;                        height: 500px;                        background: url("http://www.google.com/intl/en/images/logo.gif") center no-repeat;                }                </style>        </head>        <body>                 <div></div>             </body></html>