威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

使一个层垂直居中于浏览器

让一个层垂直居中于浏览器中,不管分辨率和屏幕的大小和高度,它始终处于页面的中央。以前只实现了屏幕宽度方向上的居中,没有实现在高度方向上的居中,用 margin-top 来定义距顶部的距离。如果电脑的尺寸和分辨率都比较大的话,那样也不会美观,今天终于解决了这个问题,现在首页的“威”字将会绝对居中,效果很好!
使一个层垂直居中于浏览器

记得在设计网站首页的时候,一直都没有处理好首页上那个“威”字的位置。本来是想让“威”字垂直居中于浏览器中,不管分辨率和屏幕的大小和高度,它始终处于页面的中央。以前只实现了屏幕宽度方向上的居中,没有实现在高度方向上的居中,用 margin-top 来定义距顶部的距离。如果电脑的尺寸和分辨率都比较大的话,那样也不会美观。

今天终于解决了这个问题,现在首页的“威”字将会绝对居中,效果很好!


<!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">
div {
	position:absolute;
	top:50%;
	left:50%;
	margin:-47px 0 0 -47px;
	height:94px;
	width:94px;
	}
</style>
</head>
<body>
<div style="">
<img alt="" src="/logo/weisay.gif" />
</div>
</body>
</html>
说明:

1、这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二。

2、对于margin:-47px 0 0 -47px,前一个-47px是height的值除以二,后一个-47px是width的值除以二。

您可能还会对这些文章感兴趣!

使一个层垂直居中于浏览器:目前有 1 条评论

  1. 3434
    沙发
    3434:枫树极速浏览器 2.0.1.29 Windows XP

    嗯,效果不错,学习了啊!

    2008-03-14 17:01 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry