CSS圖片垂直置中方法整理集合

標籤：style   blog   http   io   ar   os   sp   div   on   

原帖連結：http://bbs.blueidea.com/thread-2666987-1-1.html

1、因為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>

　　

2、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" /></div>

　　

CSS圖片垂直置中方法整理集合