A-A+

css实现浏览器垂直水平居中效果代码:

2015年01月27日 前端 暂无评论 阅读 1,314 次
守财鹿邀请码

可能是由于居中相对美观一些吧,所以一些弹窗或者功能模块出现的位置都是位于网页中间,下面就介绍一端利用css实现的将div实现垂直水平居中的效果,代码如下:

<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.twbweb.com/" />
<title>web小工匠</title>
<style type="text/css">
#itwbweb{
 position:absolute; //这里可以换成fixed,就可以实现跟随屏幕滚动
 top:50%;
 left:50%;
 margin:-100px 0 0 -150px;
 width:300px;
 height:200px;
 z-index:99;
 background:green;
}
</style>
</head>
<body>
<div id="itwbweb"></div>
</body>
</html>

上面的代码实现div垂直水平居中效果,下面简单介绍一下原理。
实现原理:
首先设置div为绝对定位,然后将其top和left值分别设置为50%,但是这样并没有实现div的中心点垂直水平居中效果,而是将div的左上角实现了垂直水平居中,所以还得利用外边距margin设置上边距和左边距分别为负数,尺寸分别是高和宽的一半,这样就实现了中心点居中效果。

打赏

给我留言

Copyright © WEB小工匠 保留所有权利.   渝ICP备15008469号

渝公网安备 50023602000173号

用户登录

分享到: