[推荐] CSS图片垂直居中方法整理集合！(常见问题解答)

看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
/*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>  </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>
提示：您可以先修改部分代码再运行

/*lesliezmz 粘贴结束 */

/*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>  </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">  </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">  </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">  </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>  <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>
提示：您可以先修改部分代码再运行

[ 本帖最后由 yoom 于 2010-1-19 10:39 编辑 ]

作者: snwebsite 发布时间: 2006-08-14

一直想说一句：
DIV+CSS布局真的很jian！！

做为一个网页布局方式，竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法！
是不是可以这样怀疑，作为一种布局方式，从布局的实用方便上来说：DIV+CSS很垃圾！

被这个问题烦了太多次了，今天发泄哈～

作者: 飞虫发布时间: 2006-08-14

<html> <head> <style type="text/css">  </style> </head> <body> <div id="rightcol"> <ul id="picturelist"> <li><a href="#"><img style="background:url(http://www.blueidea.com/img/common/logo.gif) no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li> <li><a href="#"><img style="background:url(http://www.blueidea.com/img/common/logo.gif) no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li> <li><a href="#"><img style="background:url(http://www.blueidea.com/img/common/logo.gif) no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li> <li><a href="#"><img style="background:url(http://www.blueidea.com/img/common/logo.gif) no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li> <li><a href="#"><img style="background:url(http://bbs.blueidea.com/images/blue/newtopic.gif) no-repeat center center;" src="http://www.797audio.com.cn/space.gif" />blueidea</a></li> </ul> </div> </body> </html>
提示：您可以先修改部分代码再运行

这个是我要但效果，可惜一直没有实现，现在是把图片当作背景来处理的
用background的center center使其居中
然后在上层放一个透明但space.gif图片

作者: 老二发布时间: 2006-08-15

有时候想起来有太多问题了，对浏览器也好，对布局也好，个人觉得DIV真的不实用

作者: wgh001 发布时间: 2006-08-15

代码是死的,人是活的
那么多代码,还不如在DIV里面套个表格

作者: zern 发布时间: 2006-08-15

蓝色早解决此问题了
CSS解决未知高度垂直居中

相关的垂直居中问题可看下面一篇
CSS实现完美垂直居中

作者: reda 发布时间: 2006-08-15

楼上那个IE7下什么都看不见呢

作者: zern 发布时间: 2006-08-22

不错，收了
再问一次楼主：发帖子时标题能不能要加那么多叹号？？？还是全角的

作者: HotHeart 发布时间: 2006-08-29

—_—！郁闷`````````

作者: snwebsite 发布时间: 2006-08-29

引用:

原帖由飞虫于 2006-8-14 21:28 发表
一直想说一句：
DIV+CSS布局真的很jian！！

做为一个网页布局方式，竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法！
是不是可以这样怀疑，作为一种布局方式，从布局的实用方便上来说：DIV+ ...

个人觉得DIV平台还不成熟
不易推广
就好比楼上说的

作者: wgh001 发布时间: 2006-09-12

不可以偏盖全

作者: snwebsite 发布时间: 2006-09-12

如果让背景图片上下居中，左右局左，该怎么写？

作者: soncy 发布时间: 2006-09-12

作者: snwebsite 发布时间: 2006-09-12

要的是图片未知大小的情况下如何垂直居中！！！！！！！！！！！

请文明用语!谢谢

[ 本帖最后由 snwebsite 于 2006-11-7 06:05 编辑 ]

作者: qsylbt 发布时间: 2006-09-14

楼上的请注意你的素质。

本来就是未知大小，已知固定大小还需如此吗？莫名其妙

作者: snwebsite 发布时间: 2006-09-14

引用:

原帖由飞虫于 2006-8-14 21:28 发表
一直想说一句：
DIV+CSS布局真的很jian！！

做为一个网页布局方式，竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法！
是不是可以这样怀疑，作为一种布局方式，从布局的实用方便上来说：DI ...

我希望css的背景属性可以定义多个背景图片，并可以自己定义任意位置浮动。

作者: hauy 发布时间: 2006-10-19

<!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=gb2312" />
<title>dd</title>
</head>
<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>
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我在FF中发现不是垂直居中的是怎么回事呢

作者: dongna 发布时间: 2006-11-17

引用:

原帖由飞虫于 2006-8-14 21:28 发表
一直想说一句：
DIV+CSS布局真的很jian！！

做为一个网页布局方式，竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法！
是不是可以这样怀疑，作为一种布局方式，从布局的实用方便上来说：DI ...

就是啊，这么个小问题，搞这么长的代码，真是垃圾

作者: zhaoliancheng 发布时间: 2006-12-31

div + css 因为各浏览器的原因弄得我们很受伤

作者: pensz 发布时间: 2007-07-04

居个中都要这么多问题要讨论。。。诶，不知道说什么好

作者: alexnyy717 发布时间: 2007-07-05

楼上的几位真的是有病,垂直居中有必要搞那么复杂吗?计算一下高度直接用margin-top不就OK了,是不是在卖弄技巧,有必要让简单的问题复杂化吗

作者: dxformat 发布时间: 2007-08-01

引用:

原帖由 wgh001 于 2006-8-15 13:27 发表
有时候想起来有太多问题了，对浏览器也好，对布局也好，个人觉得DIV真的不实用

为什么人吃肉的时候不直接吃，还要煮熟，煮熟还要加盐，加盐还要放酱油...是吧？

作者: yinghailai 发布时间: 2007-08-19

我也发泄一下！

用div布局就是一句老话：“没有困难，创造困难也要上！”

作者: xpoqx 发布时间: 2007-08-19

路，都没有那么简单的。
在走向成熟之前，势必有些弯路。
别的不说，就我前阵重构那个页打开速度的提升，我就喜欢div。

作者: dsqwei1 发布时间: 2007-08-20

对无知的人，不需要太多的解释，

都说了不知道图片的尺寸，如果你只考虑你自己，当然不用看着篇文章，但是要合作，从后台插入图片你就知道了，那些JJWW的人，就是啥也不会，啥也不懂，就知道装

作者: sdw65063251 发布时间: 2007-09-20

其实这只是一个考试题目而已
很多人觉得用块对象布局来处理这种事情非常麻烦，其实还是用了表格布局的思考方式来处理块对象的布局

在用DIV布局的时候一般会根据具体情况用其他方式替代这种表格布局常见方式的。

作者: aquarior 发布时间: 2007-10-23

这些东西也就是做做演示的demo
加上完整的首部声明、<html>、<body>、<head>等结构标签，没能兼容的，派不上实际用场

作者: nower 发布时间: 2007-11-19

用那么多css来实现一个图片垂直居中问题,有点....
还不如div里面插一个表格来的方便,也没那么多多兼容不兼容的问题,代码也很少.

作者: ycsy520 发布时间: 2007-12-12

同意二楼说法，代码应以易用性为主

作者: liyi520 发布时间: 2007-12-12

遇见这种情况我就用表格

作者: mycggo 发布时间: 2007-12-17

第三种“利用字体大小方法”存在问题：

<!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 id="outerBox"> <img src="http://www.google.com/intl/en/images/logo.gif" /> </div> <script type="text/javascript"> var outerBox=document.getElementById("outerBox"); alert("容器高度："+outerBox.clientHeight); </script>
提示：您可以先修改部分代码再运行

作者: zbm2001z 发布时间: 2008-02-20

引用:

原帖由飞虫于 2006-8-14 21:28 发表
一直想说一句：
DIV+CSS布局真的很jian！！

做为一个网页布局方式，竟然连如此常用的“垂直布局”一直没有一个很方便快捷的解决方法！
是不是可以这样怀疑，作为一种布局方式，从布局的实用方便上来说：DI ...

同感！
就这么个小小的垂直居中问题，css竟然要费那么大的劲才能做出来，真是无能！
想比表格里的垂直居中，一个valign=center就可搞定，css难道不惭愧吗？

什么时候，css能在div中直接使用"align:center;valign:center;"那就爽了

，期待那一天早点到来。

作者: jaxxcyh 发布时间: 2008-02-22

position:static;
+position:relative;

这样写是什么意思,谁能帮忙说一下?

看起来,像重载似的..

作者: KsharpNet 发布时间: 2008-03-23

引用:

原帖由 KsharpNet 于 2008-3-23 22:21 发表
position:static;
+position:relative;

这样写是什么意思,谁能帮忙说一下?

看起来,像重载似的..

hack

作者: alize 发布时间: 2008-04-23

楼主上面的代码在IE7里面并不都是垂直居中的哦

作者: fuguojian1988 发布时间: 2008-06-01

为什么我按楼主说的，设了
margin:0 auto;
width:0;
height:0;
可是我最下方的距中了，中间的一个层没有距中呢？
或许应该解释下页面是什么样的，头部是调的另了下另面，中间数据也是调的，底部的一行是在这个页面里做的，它在firefox中距中的，上面的都没有距中。我也把上面两部分所在的页面也设了 margin:0 auto; width:0; height:0;，但还是不行，(没有用border:1 solid 这项，因为我没设边框。)

作者: ylnn 发布时间: 2008-08-02

大哥们.能不看看基础的东西.什么叫在DIV里插一个TABLE?

DIV+CSS这是我们的俗称.正确的是xhtml+css.xhtml是xml的过渡.为什么不用表格.最主要的一个原因就是各有所需.而且必要要注意语义化.table就是表格就是用来显示数据清单的.

作者: nicholasfish 发布时间: 2008-10-21

1、怿飞大哥的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" > <head> <title>未知大小图片在已知大小容器水平/垂直居中</title> <style type="text/css"> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/ width:200px; height:200px; border: 1px solid #EEE; } .box img { /*设置图片垂直居中*/ vertical-align:middle; } </style> <body> <div class="box"> <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" /> </div> </body> </html>
提示：您可以先修改部分代码再运行

2、老外的方法，原先是利用字体高度及行高和容器高度一致实现图片垂直居中，不过发现容器的高度会比标准浏览器高出一截，结合怿飞的方法，容器高度x0.873=字体大小得以完美实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>未知大小图片在已知大小容器水平/垂直居中</title> <style type="text/css" media="screen"> div{ height:200px; width:300px; background:#F0F; text-align:center;/*设置水平居中*/ line-height:200px; font-size:175px;/*约为高度的0.873，200x0.873 约为175*/ } *>div{ font-size:12px } img{ vertical-align:middle;/*设置垂直居中*/ border:0; } a.container{ display:block; text-align:center;/*设置水平居中*/ height:400px; width:300px; line-height:400px; font-size:349px;/*约为高度的0.873，400x0.873 约为349*/ background:tomato; } *>a.container{ font-size:12px } /* Layout styles */ h1{ font:bold 18px Verdana, Arial, Helvetica, sans-serif } p{ font:12px Verdana, Arial, Helvetica, sans-serif } .container{ margin:0 0 20px } pre{ float:right; font:12px "Courier New", Courier, monospace; border:1px solid #CCC; padding:5px } </style> </head> <body> <h1>Applied CSS Vertical-Align</h1> <pre> div{ height:200px; width:300px; background:F0F; text-align:center; line-height:200px; font-size:200px } *>div{ font-size:12px } img{ vertical-align:middle; } </pre> <div class="container"><img src="http://www.gzink.com/images/logo.jpg" alt="" /></div> <br><br> <pre> a.container{ display:block; text-align:center; height:400px; width:300px; line-height:400px; font-size:400px; background:tomato } *>a.container{ font-size:12px } img{ vertical-align:middle; } </pre> <a class="container" href="#"><img src="http://www.gzink.com/images/logo.jpg" alt="" /></a> </body> </html>
提示：您可以先修改部分代码再运行

作者: Gzink 发布时间: 2008-10-21

我也做了一个自动居中的,代码就比较简单...

<!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> html, body, border { margin:0; padding:0;} div {margin:0 auto;border:1px solid #ccc;overflow:hidden;position:relative;text-align:center;width:600px;} img {vertical-align: middle;} </style> </head> <body> <div><img src="http://www.google.com/intl/en/images/logo.gif" width="276" height="110" /></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: czbad 发布时间: 2008-11-12

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
这个是我前段时间看的，觉得写得很好但是研究了一下午没透 = =||

作者: Tuan 发布时间: 2008-11-12

#60 的好像是水平居中哦

作者: champions 发布时间: 2008-11-13

不管任何一种方式。出来以后必有其不错的地方，怎样迎难而上就看对困难的挑战精神了，我觉得div+css是很不错的，所以有不足，但一直在改进，我们也一直在发现问题啊！

作者: pixyxiao 发布时间: 2008-11-16

楼主发的那些代码
好像在IE7下有几个没有实现左右居中的
不知道其他浏览器下如何

作者: 3145 发布时间: 2008-11-16

楼主的几个在FX3里有问题。

作者: babysize 发布时间: 2008-12-03

复制内容到剪贴板

代码:

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

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

这几种方法都很好，也实现了图片垂直居中的问题，不知道那位可以给我解释一下，在这里Position在P和Img中的设置以及所作的hack，为什么要这样设置，才能在各个浏览器中正常显示！
另外在FF 3.0中，图片的上下间距不等！

[ 本帖最后由 sheva1982 于 2009-1-9 16:57 编辑 ]

作者: sheva1982 发布时间: 2009-01-09

那个不嵌套的（利用字体大小）不太好用
有没有其它的不需要嵌别的标签的？

作者: sfgn 发布时间: 2009-02-27

我晕在FF下怎么只有第二个是对的?其它的都没有居中啊.

作者: wudiemperor 发布时间: 2009-03-10

实在觉得用div做图片局中很郁闷时，可以考虑把需要局中的图片放table里面，用table的垂直局中就OK了~

作者: dlcc 发布时间: 2009-03-11

垂直居中真的很烦。要是图片是动态的，怎么解决？

作者: noing520 发布时间: 2009-04-29

看到本帖我想放大招啊...06年的帖子,现在是09年....讨论了三年还没论出来...

作者: zhu104210362 发布时间: 2009-04-29

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

</style>
</head>
<body>
<div><img src="http://www.google.com/intl/en/images/logo.gif" width="276" height="110" /></div>
</body>
</html>

作者: duyan 发布时间: 2009-07-15

76的可以用
要不为了一个垂直居中
且不说那么烦长的代码不小心出个错很正常（主要是没什么标准）
再说到各个浏览器的兼容性各种解释 hack 乱的一塌糊涂完全失去的css简洁的本意
插入个表格就能解决的事情搞的那么复杂 css样式虽然好但是遇到类似的情况 table才是正解 76L的也给了我新的启发
继续学习

作者: fish2009 发布时间: 2009-10-23

利用字体的那个方法不是 height/font-size=1.14吗你用500px也能居中,但是容器的高度超过500了

作者: zhaoliancheng 发布时间: 2009-12-28

上面的例子太多都是单图的
如果多图，并用了float
全部都无效。

作者: chinesezwz 发布时间: 2010-06-24

img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}

图片大小都定死了，还有什么意义？

作者: chinesezwz 发布时间: 2010-06-24

好贴，收藏了

作者: beryl2008 发布时间: 2010-07-06

这么好的代码当然收藏

作者: xzhj521 发布时间: 2010-07-29

赞同你的说法，很多时候，如果用CSS的比较麻烦的话，我就在DIV里来个table

作者: zbl823 发布时间: 2010-10-11

常见的布局一个是图文并茂的垂直剧中，一个是注册页面的一大堆表单，我一般都选择表格布局。
我不觉得DIV在这里优点是什么！
CSS+DIV 的优点是方便页面之后的重构，这是最重要一方面；
其次 CSS+DIV对网页的浏览速度和SEO优化以及代码的简洁有一定的优势！
那么类似注册页面的一大堆表单有这个必要吗？

作者: ebfming3 发布时间: 2010-10-11