DIV垂直/水平居中2（DIV宽度和高度是动态的）-原创手记-慕课网

DIV垂直/水平居中2（DIV宽度和高度是动态的）

轩儿news 2016-03-31 15:24:20 浏览 4849

轩儿news

关注TA

手记 3

粉丝 4

获赞 291

    此片文章出现的目的是，之前小菜我发布了[DIV垂直水平居中][1]。有小伙伴反应，如果DIV的高宽是动态的，那之前代码存在的意义就不那么重要了。由此小菜我很不淡定，发布了本片代码，废话不多说，上代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>块元素DIV-垂直/水平居中（动态）</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//当调整浏览器窗口的大小时，发生 resize 事件
$(window).resize(function(){$(".mydiv").css({
position:"absolute",
left:($(window).width()-$(".mydiv").outerWidth())/2,
top:($(window).height()-$(".mydiv").outerHeight())/2});
});
$(function(){
$(window).resize();
});
});
$(function(){//当页面刷新时，发生resize事件（可删除这三行程序，自己测试一下）
$(window).resize();
});
</script>
</head>
<body>
<div class="mydiv">呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
</body>
</html>
提示：运行本段代码需要下载jQuery插件
代码原理：通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同

    最后，感谢慕课网提供该平台，大家可一起交流学习。还有就是代码是小菜我自己捣鼓的，有不足的地方，望大咖们提点。。。

8人推荐

发表评论

.box{ height: 200px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

热门评论

小王子抓猫咪2016-04-20 0

实现宽高不固定的元素在其他元素内垂直居中的最好方式是使用flex弹性盒模型。

<body>
    <div class="box">
	<h1>一二三</h1>
	<p>一二三四五</p>
	<p>二四六八十</p>
    </div>
</body>

flex-direction: column || row;

决定了box这个伸缩盒中的元素是按照哪种方向排列，X轴水平排列，or, Y轴垂直排列。

align-items和justify-content决定了这个盒子中的Flex子元素排列方式：左对齐，右对齐，还是居中。

sunfloweryll2016-04-06 0

position:absolute；top:50%；left:50%；transfrom:translate(-50%)。这样应该也是可以的吧

查看全部评论