css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

css参考文档        http://css.doyoe.com/

两篇很好的文章：（下面的css官方英文说明链接 有时间可以研究下

• http://www.w3.org/TR/css3-box/#margins
• http://dev.w3.org/csswg/css-box/#the-margin-properties
• http://dev.w3.org/csswg/css-box/#Calculating

）

1 http://www.ituring.com.cn/article/64581

无论padding 还是margin参照物都是 包含元素（父元素）的宽度

2 http://www.ituring.com.cn/article/64580

纵向auto为0，横向auto为可用的剩余空间

3 div 在另一个div里垂直居中的方法：

方法1：原理，利用绝对定位和margin。当子div设置了absolute，并且top 和 bottom（必须上下或左右同时设置值才可以）设置了值之后，margin=auto在纵向上的值不再是0而是纵向剩余空间（可用空间）

.parent {

          width:800px;

          height:500px;

          border:2px solid #000;

          position:relative;（此设置是为了让子div以此为定位参照物）

}

 .child {

            width:200px;

            height:200px;

            margin: auto;  

            position: absolute;  

            top: 0; left: 0; bottom: 0; right: 0; 

            background-color: red;

}

 

        方法二：利用display：table-cell模拟表格，然后设置vertical-align:middle（CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。）

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            display:table-cell;(垂直居中)

            vertical-align:middle;（垂直居中）

            text-align: center;（水平居中）

        }

        .child {

            width:200px;

            height:200px;

            display:inline-block;（水平居中）

            background-color: red;

        }

 

方法三：原理： display:flex;            

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            display:flex;

            justify-content:center; 点击查看justify-content的详解

            align-items:center; 点击查看align-items详情
                                                                     点击查看align-items和align-content的区别
                                                                    说明:1：align-content只针对有多行的子元素，只有一行则没有效果 2：多行的align-content:space-around和多行的align-items:center效果一样。
                                                                     点击查看align-self的详情

        }

        .child {

            width:200px;

            height:200px;

            background-color: red;

        }

方法四：浅谈display:flex    (父元素：display:flex,           子元素：margin:auto;  即可上下左右居中，通过margin可以调控位置)

.parent {

            width:800px;

            height:500px;

            border:2px solid #000;

            display:flex;

        }

        .child {

            width:200px;

            height:200px;

            background-color: red;

                          margin: auto;

        }