010(元素的垂直水平居中)

最新推荐文章于 2024-09-25 15:27:18 发布

啊啊啊啊ly

最新推荐文章于 2024-09-25 15:27:18 发布

阅读量65

点赞数

分类专栏：每天一个小知识文章标签： markdown css css3

本文链接：https://blog.csdn.net/m0_46555090/article/details/121610177

版权

每天一个小知识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Day010（元素的垂直水平居中）

一、元素在浏览器可视窗口垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type=text/css>
		*{
			margin:0;
			padding:0;
		}
	/*	
		第一种方法：让一个元素在浏览器可视窗口垂直居中
	div{
			width:200px;
			height:200px;
			background:skyblue;
			position:fixed;
			top:50%;
			left:50%;
			margin:-100px 0 0 -100px;
		}*/
		div{
			width:200px;
			height:200px;
			background:skyblue;
			position:fixed;
			top:0;
			right:0;
			bottom:0;
			left:0;
			/*网页一般以左上为（0，0）坐标，右下是没有范围的，以上四行代码给网页认为的添加了右下范围，所以下面的margin：auto产生了作用*/
			margin:auto;
		}
	</style>
</head>
<body>
	<div>s</div>
</body>
</html>

二、元素在容器里垂直水平居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type=text/css>
		*{
			margin:0;
			padding:0;
		}
		div{
			width:500px;
			height:500px;
			background:red;
			position:relative;
			margin: 40px auto;
		}
		/*div h2{
			width:100px;
			height:100px;
			background:skyblue;
			position:absolute;
			top:50%;
			left:50%;
			margin:-50px 0 0 -50px;
		}*/
		div h2{
			width:100px;
			height:100px;
			background:skyblue;
			position:absolute;
			top:0;
			left:0;
			bottom:0;
			right:0;
			margin:auto;
		}
	</style>
</head>
<body>
	<div>
		<h2></h2>
	</div>
</body>
</html>