css div居中

最新推荐文章于 2023-09-20 13:51:42 发布

原创最新推荐文章于 2023-09-20 13:51:42 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css div居中 margin负值居中

css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS实现div元素居中的方法。通过设置margin-left、margin-top为负值并结合left、top属性，可以使div元素精确地居中显示。此方法适用于固定宽度和高度的元素。

在进行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的居中了