Div之家_Div+CSS学习_SEO_Design_web2_站长工具_
Div之家首页
Div+css
SEO
UI
Design
Web info
HandBook
Tool
Div+css首页
热门搜索关键字：
教程
div
导航
ie
网站
css
WEB标准技术学习-CSS图片垂直居中方法整理集合
作者：佚名 来源：网络
（转载请注明）
css
图片垂直居中方法整理集合
时间: 2007-5-18 17:10:44 浏览：1837
看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.divhome.com/#.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="/<a href='http://www.divhome.com/csssite/channel.asp?id=2' title='css' target='_blank'>css</a>site/uploadfile/200806/14/45235753881.gif" /></p></div>
标准浏览器下另类方法:
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.divhome.com/#.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="/csssite/uploadfile/200806/14/45235753881.gif"/></p></div>
标准浏览器严格型申明下：
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.divhome.com/#.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="/csssite/uploadfile/200806/14/45235753881.gif" /></p></div>
利用字体大小的方法
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.divhome.com/#.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="/csssite/uploadfile/200806/14/45235753881.gif" /></div>
最简单当然是背景图片的方法拉
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.divhome.com/#.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("/csssite/uploadfile/200806/14/45235753881.gif") center no-repeat }</style><div></div>
Div之家
