div页面垂直居中方法

最新推荐文章于 2024-03-13 10:55:47 发布

冷月宫主

最新推荐文章于 2024-03-13 10:55:47 发布

阅读量801

点赞数

分类专栏： CSS javascript HTML5

javascript 同时被 3 个专栏收录

311 篇文章 0 订阅

订阅专栏

CSS

84 篇文章 0 订阅

订阅专栏

HTML5

52 篇文章 0 订阅

订阅专栏

层垂直居中于浏览器，一直是新手朋友比较头疼的问题。
　其实解决的思路是这样的：首们需要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>