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

 23700  2012/04/22 08:42:24

car_5

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

因为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的方式拼凑起来。

未知高宽的图片垂直局中

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

本文转自:http://bbs.blueidea.com/thread-2666987-1-9.html