居中（纯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/[/code] 
水平垂直居中：


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%)