CSS两种水平垂直居中

最新推荐文章于 2021-08-03 23:14:29 发布

原创最新推荐文章于 2021-08-03 23:14:29 发布 · 988 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #css #水平垂直居中 #自适应居中

web 专栏收录该内容

10 篇文章

订阅专栏

第一种：将固定大小的div框相对窗口水平垂直居中，改变浏览器窗口大小时，依然保持水平垂直居中；

<!doctype html>
<html lang="en">
<head>
	<title>水平垂直居中</title>
	<meta charset="utf-8">
	<style type="text/css">
	.out{width: 0px; 
		height: 0px; 
		position: absolute;
		left: 50%; 
		top: 50%;
	}
	.in{height: 300px;
		width: 300px;
		position: absolute;
		left: -150px;
		top: -150px;
		background-color: #999;
	}
	</style>
</head>
<body>
<div class="out">
	<div class="in"></div>
</div>
</body>
</html>

第二种：让一个自适应大小的div相对浏览器窗口水平垂直居中

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>自适应剧中</title>
	<style type="text/css">
		.middle{
			height: 300px;
			width: 300px;
			border: 1px solid;
			display: table-cell;
			 text-align: center;
			 vertical-align: middle;
		}
		.in{		
			background-color: red; 
			height: auto; 
			width: auto;
			min-width: 0px;
			min-height: 0px;
			display: inline;
		}
	</style>
</head>
<body>
	<div class="middle">
		<div class="in">内容自适应水平垂直居中</div>
	</div>
</body>
</html>