让div里面的多行文本垂直居中的方法：

div{height:100px;width:100px;border:solid 1px red;text-align:center; display:table-cell;vertical-align:middle}

下面是网上好不容易找的多种办法：

看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
原帖链接：IE6下用writing-mode实现 未知高度替换元素垂直居中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<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://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了

</div>

<hr />

<div class="miao">

    <span><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo" /></span>你知道的太多了你知道的太多了你知道的太多了

</div>

<hr />

<div class="miao">

    <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>你知道的太多了

</div>

</body>

</html>

/*yoom 粘贴开始 2010-01-18*/
因为Opera，FF3，IE8均支持display:talbe;这些特性了，因此改进的办法是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; 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>

如果不喜欢条件注释，可自行将代码以css hack的方式拼凑起来。
原帖链接：未知高宽的图片垂直局中
/*yoom 粘贴结束*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

<!--

* {margin:0;padding:0}

div {

    width:500px;

    height:500px;

    border:1px solid #ccc;

    overflow:hidden;

    position:relative;

    display:table-cell;

    text-align:center;

    vertical-align:middle

    }

div p {

    position:static;

    +position:absolute;

    top:50%

    }

img {

    position:static;

    +position:relative;

    top:-50%;left:-50%;

    width:276px;

    height:110px

    }

-->

</style>

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

标准浏览器下另类方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">

<!--

body {

    margin:0;padding:0

    }

div {

    width:500px;

    height:500px;

    line-height:500px;

    border:1px solid #ccc;

    overflow:hidden;

    position:relative;

    text-align:center;

    margin:auto

    }

div p {

    position:static;

    +position:absolute;

    top:50%

    }

img {

    position:static;

    +position:relative;

    top:-50%;left:-50%;

    width:276px;

    height:110px;

    vertical-align:middle

    }

p:after {

    content:".";font-size:1px;

    visibility:hidden

    }

-->

</style>

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

标准浏览器严格型申明下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<style type="text/css">

<!--

* {margin:0;padding:0}

div {

    width:500px;

    height:500px;

    line-height:500px;

    border:1px solid #ccc;

    overflow:hidden;

    position:relative;

    text-align:center;

    }

div p {

    position:static;

    +position:absolute;

    top:50%;

    vertical-align:middle

    }

img {

    position:static;

    +position:relative;

    top:-50%;left:-50%;

    width:276px;

    height:110px;

    vertical-align:middle

    }

-->

</style>

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

利用字体大小的方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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>

<div>

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

</div>

display:inline-block 方法

<!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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<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>

<div>

</div>

CSS图片垂直居中方法的更多相关文章

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

    原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...

  2. css图片垂直居中

    css图片垂直居中一.style代码 .case-pic{ height: 125px; position: relative; text-align: center } .case-pic span ...

  3. css水平垂直居中方法（一）

    第五种方法: 首先设置一个div,设置其的width与height,为了方便观察,我定义了div的背景色为red,代码如下: <!doctype html> <html lang=& ...

  4. css 图片垂直居中总结

    1.利用vertical-align:middle: 父级元素设置成display:table-cell; 同级元素设置一个span标签 设置display:inline-block:图片样式设置ve ...

  5. CSS——图片替换方法比较

    图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示.其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要对象. 经典的替换方法: Fahrner ...

  6. CSS元素垂直居中方法总结

    坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...

  7. css元素垂直居中方法

    1.Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...

  8. CSS——图片替换方法：Fahrner图片替换法（FIR）

    Html: <h1 id="fir"><span>Fahrner Image Replacement</span></h1> CSS ...

  9. css上下垂直居中方法总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 第3章 rpm命令管理

    3-1 RPM包命名规则 3-2 安装命令 3-3 升级与卸载 3-4 RPM包查询 3-5 RPM包校验

  2. Android 中解析 JSON

    有什么不懂的可以去官网去看看:www.json.org 在google android中也有关于解析JSON的类库:JsonReader,但是只能在3.0以后的版本中才可以用,在这里我们用google ...

  3. 论文笔记之：Playing Atari with Deep Reinforcement Learning

    Playing Atari with Deep Reinforcement Learning <Computer Science>, 2013 Abstract: 本文提出了一种深度学习方 ...

  4. css animation让图标不断旋转

    @keyframes rotating{from{transform:rotate(0)}to{transform:rotate(360deg)}} animation:rotating 1.2s l ...

  5. 引用POPUI来实现弹窗效果，且弹窗中的内容可以点击事件

    seajs.use(['../js/ui/dialog'],function(){ $('.center-button').bind('click',function(){ var $dlg = $. ...

  6. AIDL Service Android进程间通信机制

    转载出处:http://www.apkbus.com/home.php?mod=space&do=blog&uid=664680&id=59465 我们知道,在Android ...

  7. C#中的预处理指令

    C#中的预处理指令 作为预处理中的一对:#region name ,#endregion可能是大家使用得最多的,我也常用它来进行代码分块,在一个比较长的cs文件中,这么做确实是一件可以让你使代码更清晰 ...

  8. jQuery.fn.extend与jQuery.extend

    jQuery.extend(),是扩展的jQuery这个类. 假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能.这 ...

  9. 自定义Mvc5 Owin 验证

    public class AuthIn : IUserAuthenticate { public static ApplicationUserManager UserManager { get { r ...

  10. unity，将camera设为don't clear在android上会显示不正常

    将camera设置为don't clear,在pc和ios上显示没问题,但在android上显示不正常,改为only depth可以.