css 利用 position + margin 实现固定盒子横向纵向居中

最新推荐文章于 2021-10-07 14:17:22 发布

352328759

最新推荐文章于 2021-10-07 14:17:22 发布

阅读量735

点赞数 2

分类专栏：实际应用 css 文章标签：横竖居中 css布局

本文链接：https://blog.csdn.net/u013970232/article/details/111506209

版权

实际应用同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

css

14 篇文章 0 订阅

订阅专栏

margin:auto; + position: absolute; 上下左右:0
一看 demo 就懂的啦

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>利用 position + margin 实现固定盒子横向纵向居中</title>
	<style>
		body * {
			outline: 1px #ff0000 solid;
		}

		.father {
			width: 500px;
			height: 300px;
			position: relative;
		}

		.father .son {
			width: 180px;
			height: 140px;
			/*  */
			position: absolute;
			right: 0;
			bottom: 0;
			top: 0;
			left: 0;
			margin: auto;
		}
	</style>
</head>

<body>
	<div class="father">
		<div class="son">margin:auto + 上下左右:0</div>
	</div>
</body>

</html>

//end

352328759

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 利用 position + margin 实现固定盒子横向纵向居中

margin:auto; + position: absolute; 上下左右:0一看 demo 就懂的啦<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="initial-scal
复制链接

扫一扫