居中（纯css方式）

 参考文章：
http://blog.csdn.net/freshlover/article/details/11579669
http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120135156225265/
http://blog.163.com/ranma2151920@126/blog/static/9502770620137522326362/

水平垂直居中：

1.display为table-cell

父 — 子 （居中元素）

父为display : table-cell,同时vertical-align : middle,(垂直居中); 子元素设置margin:auto;(水平居中)

<div id = "div1">
　　<div id = "div2"></div>
</div>

#div1 {
width : 300px;
height : 300px;
display : table-cell;  //这句是关键
vertical-align : middle; //垂直居中
border : 1px solid red;
}
#div2 {
background : blue;
width:100px;
height : 100px;
margin:0px auto;   //这句很重要，水平居中。
}

2.神奇的margin：auto;

#div1 {
    position : relative;
    width : 300px;
    height :300px;
    border : 1px solid red;
    }
#div2 {
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;   //相对于父元素定位
  top: 0; 
  left: 0; 
   bottom: 0;
   right: 0;
  background : blue;
}

3.css3中的transform中的translate平移属性，

先相对于文档流中的位置，设置top和left各自50%，在用translate在x轴和y轴上各自向反方向移动自身宽度和高度的50%(一半)

#div1 {
    width : 300px;
    height :300px;
    border : 1px solid red;
    }
#div2 {
    width: 100px;
    height : 100px;
    position: relative;  //相对于文档流中的位置
    top: 50%;    //这个是相对于定位的元素的，top值 = 50% * 父元素的高度　　left: 50%;    //left值 = 50 % * 父元素的宽度
    left : 50%;
    -webkit-transform: translate(-50%,-50%);  //这个50%是相对于自身(div2)的,
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background : blue;
}

总结：三种，一种是父元素设为display为table-cell，并设置vertical-align : middle,子元素为margin : 0px auto;

父为table-cell / vertical-align:middle + 子元素margin : auto;

第二种是（绝对定位居中）：利用定位来的+margin：auto，子元素相对于父元素定位，父元素display设为不为static，子元素display为absolute,同时在子元素上设置margin:auto,还需要设置top/left/right/bottom都设为0px;

相对于父元素绝对定位+left/right/top/bottom均为0 + margin:auto;

第三种是transform中的translate，子元素relative ,设置top和left都是50%,然后tranform:translate(-50%,-50%);

相对定位 + top/left:50% + translate(-50%,-50%)