关于margin: auto及margin: 0 auto的一些见解

在写css时margin:auto;使用频率非常高，常用于div的居中。

何为margin？

margin是指块级元素的外边距，如下图所示，XXXXX是div中的内容，通过设置margin的值，可控制div与其他块级元素的距离

margin设置不同数量的值时的含义

我们常看到

margin:auto;

margin: 0px auto;

margin: 10px 20px 30px 40px;

相关的语句，当margin有不同数量的值时，其含义分别是什么？

首先margin最多有4个值，按顺序为顺时针：上，右，下，左

当给margin提供4个值时，分别设置上（margin-top），右（margin-right），下（margin-bottom），左（margin-left）的值；

当给margin提供3个值时，第1个为上，第2个为左右，第3个为下；

当给margin提供2个值时，第1个为上下，第2个为左右；

当给margin提供1个值时，此值代表上下左右四个方向。

margin的值为auto的具体含义是什么？

auto意为自动填充。以margin:0,auto;为例，程序会自动计算剩余左右两部分的空白长度，把其等分再作为div左右的外边距。所以我们可以使用此行代码使得div居中。

为什么使用margin：auto;可以使div左右居中，却不能垂直居中？

我们设置两个盒子，都在里面添加margin:auto;所有代码如图所示：

<!DOCTYPE html>
<html>
<head><title>div    </title><style type="text/css">.div1 {background-color: gray; /* 背景色 */height: 500px; /* 盒子的长宽 */width: 600px;margin: auto; /* 居中 */}.div2 {background-color: red;height: 200px;width: 200px;margin: auto;}</style>
</head>
<body><div class="div1"><div class="div2"></div></div></body>
</html>

实现效果:

可看到盒子已经成功地左右居中，但并没有垂直居中。我查看了相关文档，在这里写一下个人的见解。首先理解块级元素的概念，块级元素在默认情况下会占据整行空间，即使元素宽度不是百分百占据浏览器，浏览器也会给它空出整行的空间，这也对应了外边距的设立。如果不做任何处理，下一个块级元素会另起一行。那么当写上margin:auto;时，可理解为左右尚有空缺，所以可以看到居中效果，但上下已经没有空缺了（在浏览器眼里），即margin-top和margin-bottom都自动设置为0。

在下一篇博客中会写一篇如何水平、垂直居中div的博文