首页 > 其他 > 详细

div上下左右居中

时间:2016-04-07 19:00:01      阅读:185      评论:0      收藏:0      [点我收藏+]

css实现:

<style type="text/css">

.middle{
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px ;
   border:1px solid red;
    }
</style>
</head>

<body>
    <div class="middle"></div>
</body>
</html>

js实现:

<style type="text/css">

.middle{
   width:300px;  
   height:200px;  
   
   border:1px solid red;
    }
</style>
</head>

<body>
    <div class="middle"></div>
</body>
<script type="text/javascript">
$(function(){
    $(".middle").css({
        position:"absolute",
        left:($(window).width()-$(".middle").width())/2,
        top:($(window).height()-$(".middle").height())/2,
    
        })
    })
</script>
</html>

div上下左右居中

原文:http://warmdoll.blog.51cto.com/10881334/1761201

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!