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

建站知识 2021-07-02 23:04www.168986.cn长沙网站建设

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;
			: 0;
			left: 0;
			margin: auto;
		}
	</style>
</head>

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

</html>

//end

到此这篇关于css 利用 position + margin 实现固定盒子横向纵向居中的方法的文章就介绍到这了,更多相关css固定盒子横向纵向居中内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！

上一篇：css实现弹窗上下左右居中且背景透明锁定窗口效下一篇：html5+css3之制作header实例与更新

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设