记得在设计网站首页的时候，一直都没有处理好首页上那个“威”字的位置。本来是想让“威”字垂直居中于浏览器中，不管分辨率和屏幕的大小和高度，它始终处于页面的中央。以前只实现了屏幕宽度方向上的居中，没有实现在高度方向上的居中，用 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的值除以二。
本文固定链接: https://www.weisay.com/blog/make-layer-center-browser.html | 威言威语
huhen.com:
源码分享网:
布衣加针:
逝魂:
金风飒飒:
阿哲:
现在都是移动app
贾旭:
word:
周良粥凉:
GT道人:
嗯，效果不错，学习了啊！