CSS排版DIV的“margin”属性常见布局技巧垂直居中对齐，左上角，左下角，右下角，右上角对齐方式的实现

margin的值类型有：auto | length | percentage
 
percentage：百分比是由被应用box的containing block

margin的默认值为0，并且margin支持负值。
 
margin可以用来同时指定box的四边外边距。如果属性margin有四个值，那么值将按照上-右-下-左的顺序作用于四边，按顺时针的顺序围绕元素。
表达式如下：

margin：top right bottom left；

四个数值中间以空格分隔。效果等同于：

 margin-top:value;
margin-right:value;
margin-bottom:value;
margin-left:value;

省略的数值写法，基本原则如下：
 
引用:
1.如果没有left值，则使用right代替；
2.如果没有bottom值，则使用top代替；
3.如果没有right值，则使用top值代替。
 
根据这些基本原则，我们可以有三种省略方式，但不管怎样省略margin的数值都会大于等于一个，而margin的默认数值是从top开始至left结束，那么对于省略的具体情况，我们可以从left反推理回去。
 
1.如果margin只有三个值，按照值的顺序为margin：top right bottom; 缺少了left，根据原则，则left的值有right来代替。
 
margin:10px 20px 30px;   就等于  margin:10px 20px 30px 20px;
 
2.如果margin只有两个值，按照值的顺序为margin：top right; 缺少了bottom和left，根据原则left的值由right来代替，bottm的值由top来代替。
 
margin:10px 20px;  就等于  margin:10px 20px 10px 20px;
 
3.如果margin只有一个值，按照值的顺序为margin:top;  缺少了bottom、left和right，其它值全部由top来代替。
 
margin:10px;     就等于   margin:10px 10px 10px 10px;
 

---

实战演习：
 

<div class="A">

        <div class="B"></div>

</div>

B在A的布局内的相对排版位置：

.A{ display:flex; }   /* 重要：display必须是flex弹性布局才有效 */

左右居中对齐：   .B{ margin:0 auto; }

垂直居中对齐：  .B{ margin:auto; }  或者  .B{ margin:auto auto; } 

左上角对齐： .B{ margin:0 auto auto 0; } 

左下角对齐： .B{ margin:auto auto 0 0; } 

右上角对齐： .B{ margin:0 0 auto auto; } 

右下角对齐： .B{ margin:auto 0 0 auto; } 


靠左对齐垂直居中： .B{ margin:auto auto auto 0; }

靠右对齐垂直居中： .B{ margin:auto 0 auto auto; }