让Div垂直居中于浏览器窗口

最新推荐文章于 2026-04-15 19:57:51 发布

原创最新推荐文章于 2026-04-15 19:57:51 发布 · 1.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#浏览器 #div #xhtml #html #css

#网络

收录于

本文介绍了一种简单实用的方法来实现网页元素在浏览器窗口内的垂直居中显示。通过结合使用CSS的绝对定位与负外边距，可以轻松地将任意大小的层定位到页面中央。

层垂直居中于浏览器，一直是新手朋友比较头疼的问题。
　　其实解决的思路是这样的：首们需要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>mb5u.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>mb5u.com - Div CSS布局常见问题</div>
</body>
</html>

声明：本文章转自网络，如有侵犯权益请留言联系