在写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的博文
1039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
