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

最新推荐文章于 2023-07-17 17:40:55 发布

abxn2002

最新推荐文章于 2023-07-17 17:40:55 发布

阅读量588

点赞数

分类专栏：前端学习笔记

前端学习笔记专栏收录该内容

99 篇文章 0 订阅

订阅专栏

转载地址: 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>

abxn2002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS图片垂直居中方法整理集合

转载地址: http://www.w3cfuns.com/thread-5595347-1-1.html这个问题我们平时编码是时常会遇到，下面就把在网上看到的一些方法总结一些，已备不时之需：一、用writing-mode实现未知高度替换元素垂直居中：当writing-mode为tb-rl时，文档流是从上到下，从右到左书写。然后设置text-align: center就可
复制链接

扫一扫