margin:auto的作用

最新推荐文章于 2024-06-12 12:14:48 发布

Sakura_小樱花

最新推荐文章于 2024-06-12 12:14:48 发布

阅读量1.5k

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_45709232/article/details/125978820

版权

就字面意思而言，即外边距自动计算。我们可以使用该属性进行水平居中

例如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		body{
			padding: 100px;
		}
		.main{
			width: 600px;
			height: 600px;
			border:  1px solid red;
			margin: auto;
		}
		</style>
	</head>
	<body>
		<div class="main"></div>
	</body>
</html>

水平居中的原理是

在可视化布局内，块级非替换元素在普通流内布局有公式为：左margin+左border+左padding+width+右padding+右border+右margin = 包含块宽度。那么body宽度=左margin+1px+100px+600px+100px+1px+右margin。所以游览器会自动计算main左右外边距最终使得包含块达到其宽度（当前body的宽度）。达到水平居中。

那么，为什么垂直方向上没有居中？

原来是垂直方向上没有类似水平方向的宽度计算方式，默认margin:auto中上下外边距为0.