如何让层垂直居中于浏览器窗口？
- 作者：52css 来源：52css 文章点击数：
层垂直居中于浏览器，一直是新手朋友比较头疼的问题。
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。
层垂直居中于浏览器的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</title>
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid red;
}
-->
</style>
</head>
<body>
<div>52css.com - Div CSS布局 常见问题</div>
</body>
</html>
- 相关文章
| ·如何实现多风格选择 样式实时切换？ | 07-29 |
| ·如何用css控制一个容器的显示与隐藏？ | 07-29 |
| ·应用CSS framework进行开发时的思考与小结 | 07-29 |
| ·图片垂直居中之姊妹--DIV垂直居中 | 07-29 |
| ·模仿火狐和Mozilla 微软推增强浏览器插件IE7Pro助IE一 | 07-28 |
| ·CSS文件是链接 还是应该嵌入？ | 07-28 |
| ·absolute与relative如何区分 怎么用？ | 07-28 |
| ·CSS小结：一行内文本超出指定宽度溢出的处理 | 07-26 |
