如何实现div块的居中（水平加垂直居中）

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

翊沐

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

阅读量1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/evilemon/article/details/46728873

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

今天去面试，HR随意出了几个问题，其中就有如何实现div的居中。

我当时想，水平居中我是会的

<!DOCTYPE >
<html lang="zh-CN">
	<head>

		<style>
			body {
			height: 100%;
			padding: 0;
			margin: 0;
				}

			#container {
			width: 800px;
			height: 600px;
			background-color:#12eeed;
		        margin: 0 auto;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
	</body>
</html>

但是垂直居中，没整过啊，后来一想可以用相对定位或者决定定位啊，多余的用margin值来补充。

<!DOCTYPE >
<html lang="zh-CN">
	<head>

		<style>
			body {
			height: 100%;
			padding: 0;
			margin: 0;
				}

			#container {
			width: 800px;
			height: 600px;
			background-color:#12eeed;
			margin-left:-400px;
			margin-top:-300px;
			position:relative;
			top:50%;
			left:50%;
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
	</body>
</html>

这样就可以了，只不过要注意的是，使用position属性时，如果有百分比，百分比相对于父级元素，此处是以body作为父级元素。