备忘：CSS图片垂直居中全兼容淫技整理集合

最新推荐文章于 2025-09-11 10:42:34 发布

转载最新推荐文章于 2025-09-11 10:42:34 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aim-at-is-the-tao-in/p/3701726.html

文章标签：

#xhtml

1. ie的文档流样式 writing-mode:tb-rl

.box1 a{
    writing-mode:tb-rl; /* 触发layout 后面高度生效，文档流自上往下，自右往左，宽度要自适应，文字方向在垂直方向居中 */
    height:100%;
    vertical-align:middle
}

2. inline-block方式

.box2 i{
    zoom:1; height:100%; width:0; /* 触发layout，撑起行内的高度，宽度为0，不占横向空间 */
    background:#c00;
    vertical-align:middle;
}

3. 利用字体大小

.box3{
    *display: block;
    *font-size: 87px;/约为高度的0.873，200*0.873 约为87/
    *font-family:Arial;/防止gbk等编码引起的hack失效问题/
}

4. 绝对定位

示例

	<!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>页面元素垂直居中的几种方法</title>

	<link href="http://zzsvn.pcauto.com.cn/svn/%d6%c6%d7%f7%b2%bf%b9%e6%b7%b6/web%b1%ea%d7%bc/styles/reset.css" rel="stylesheet" />


	<style>
	.box{ width:100px; height:100px; line-height:22px; border:1px solid #c00;}


	.box1{ display:table-cell; vertical-align:middle; text-align:center;}
	.box1 a{
	writing-mode:tb-rl; /* 触发layout 后面高度生效，文档流自上往下，自右往左，宽度要自适应，文字方向在垂直方向居中 */
	height:100%;
	vertical-align:middle
	}


	.box2{ display:table-cell; vertical-align:middle; text-align:center;}
	.box2 i{
	zoom:1; height:100%; width:0; /* 触发layout，撑起行内的高度，宽度为0，不占横向空间 */
	background:#c00;
	vertical-align:middle;
	}
	.box2 img{ vertical-align:middle}


	.box3{ display:table-cell; vertical-align:middle; text-align:center;}
	.box3{
	*display: block;
	font-size: 87px;/约为高度的0.873，2000.873 约为87/
	font-family:Arial;/防止gbk等编码引起的hack失效问题*/
	}

	.box4{ display:table-cell; vertical-align:middle; text-align:center;}

	</style>
	<!--[if lte IE 7]>
	<style>
	.box4{ position:relative; }
	.box4 a{ position:absolute; display:block; left:50%; top:50%;}
	.box4 img{position:relative;left:-50%;top:-50%;}
	</style>
	<![endif]-->
	</head>

	<body>

	<br />
	方法一
	<div class="box box1">
	<a href="#"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a>
	</div>

	<br />
	方法二
	<div class="box box2">
	<i></i>
	<a href="../group/176189.html"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a>
	</div>

	<br />

	方法三
	<div class="box box3">
	<a href="../group/176189.html"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a>
	</div>

	<br />
	方法四
	<div class="box box4">
	<a href="../group/176189.html"><img src="http://i3.3conline.com/images/piclib/201112/07/batch/1/119960/13232494161050pm91ci8xn_small.jpg"></a>
	</div>





	</body>
	</html>