让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. db2 字符串转换 数字

    今天使用聚合函数的时候 发现 varchar类型的是不可用的,所以呢就开始想办法解决 用到了转换函数cast(s.score as bigint) 然后有一个问题就是如果数据为空的话就会发生转换错误. ...

  2. haar-like特征(转载)

    浅析人脸检测之Haar分类器方法  [补充] 这是我时隔差不多两年后, 回来编辑这篇文章加的这段补充, 说实话看到这么多评论很是惊讶, 有很多评论不是我不想回复, 真的是时间久了, 很多细节我都忘记了 ...

  3. 101. Symmetric Tree

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  4. magic矩阵

    魔方矩阵 魔方矩阵是有相同的行数和列数,并在每行每列.对角线上的和都相等.你能构造任何大小(除了2x2)的魔方矩阵. 1.历史       魔方又称幻方.纵横图.九宫图,最早记录于我国古代的洛书.据说 ...

  5. 百度APIStore

    链接 http://apistore.baidu.com/ 提供了许多免费的api接口,用来做功能性的查询

  6. HDU 5955 Guessing the Dice Roll

    HDU 5955 Guessing the Dice Roll 2016 ACM/ICPC 亚洲区沈阳站 题意 有\(N\le 10\)个人,每个猜一个长度为\(L \le 10\)的由\(1-6\) ...

  7. HDU 5513 Efficient Tree

    HDU 5513 Efficient Tree 题意 给一个\(N \times M(N \le 800, M \le 7)\)矩形. 已知每个点\((i-1, j)\)和\((i,j-1)\)连边的 ...

  8. POJ-1741 Tree （树上点分治）

    题目大意:一棵带边权无根树,边权代表距离,求距离小于等于k的点对儿数. 题目分析:这两个点之间的路径只有两种可能,要么经过根节点,要么在一棵子树内.定义depth(i)表示点 i 到根节点的距离,be ...

  9. Visible 绑定

    目的 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 <script src="knockout.js"></script><div da ...

  10. 通过js对表单对象的便捷获取

    <form name="a"> <input name="s" value="33"/> </form> ...