码迷,mamicode.com
首页 > 其他好文 > 详细

div上下左右居中

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

标签:div   上下   居中   

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上下左右居中

标签:div   上下   居中   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!