css div居中

xuyuwas

于 2016-04-29 10:01:52 发布

阅读量391

点赞数

分类专栏： css 文章标签： css div居中 margin负值居中

本文链接：https://blog.csdn.net/wasbb_mm/article/details/51279543

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在进行css布局的时候，如果需要div居中的话，可以利用一下margin的负值的小技巧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style type="text/css">
	div{
		height: 600px;
		width: 400px;
		margin-left: -200px;
		margin-top: -300px;
		left: 50%;
		top:50%;
		background-color: red;
	}
	</style>
	<div></div>
</body>
</html>

主要原理就是取div的中点，然后就50%的移动，就可以实现div的居中了