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

最新推荐文章于 2021-06-07 19:03:41 发布

works07

最新推荐文章于 2021-06-07 19:03:41 发布

阅读量1.7k

点赞数

文章标签：浏览器 div xhtml html css 网络

本文链接：https://blog.csdn.net/works07/article/details/4038654

版权

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

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

works07

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让Div垂直居中于浏览器窗口

层垂直居中于浏览器，一直是新手朋友比较头疼的问题。　　其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。　　如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中
复制链接

扫一扫