让层居中于浏览器窗口
2011-02-16
大连
/others/2011/02/16/let-layer-centered-in-center-of-browser.html
others
层垂直居中于浏览器,一直是新手朋友比较头疼的问题。
其实解决的思路是这样的:首们需要 position:absolute;
绝对定位。而层的定位点,使用外补丁 margin
负值的方法,负值的大小为层自身宽度高度除以二。如:
一个层宽度是 400,高度是 300。使用绝对定位距离上部与左部都设置成 50%。而 margin-top
的值为 -150。margin-left
的值为 -200。
这样我们就实现了层垂直居中于浏览器的样式编写。
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>让层居中于浏览器窗口</div>
关于作者
最近更新: