jquery实现将html div在窗口中水平垂直居中效果，无论是否调整窗口大小

如图所示：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码实现了字div在父div中的水平垂直居中效果</title>
<style type="text/css">
.parent
{
  width:500px;
  height:500px;
  background-color:red;
}
.children
{
  width:200px;
  height:100px;
  background-color:green;
}
</style>
<script type="text/javascript" src="http://static.zuidaima.com/resource/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(window).resize(function(){
    $(".children").css({
      position:'absolute',
      left:($(".parent").width() - $(".children").outerWidth())/2,
      top:($(".parent").height() - $(".children").outerHeight())/2 + $(document).scrollTop()
    });
  });
  $(window).resize();   
})
</script>
</head>
<body>
<div class="parent">
  <div class="children"></div>
</div> 
</body>
</html>

猜你喜欢

打赏

0个评论

0个牛币 jQuery 水平垂直居中 JavaScript