div中div垂直水平居中方法汇总

1.   父元素设置定位position,子元素设置position:随便;left:50%;top:50%; margin-left: -width/2; margin-top: -height/2;（适配所有浏览器）

2.   父元素设置定位position,子元素设置position:absolute;left:0;top:0;bottom: 0;right: 0;margin: auto;橘色部分让这个盒子尽量伸张开，margin auto使其尽量上下左右都居中。（IE(IE8 beta)中无效）子元素一定设置absolute，而不是relative

3.   父元素display: flex;justify-content: center; align-items: center;

可能兼容性不好，要考虑兼容性，可能要写别的兼容性语句

4.   父元素display: table-cell;vertical-align: middle; text-align: center;子元素display:inline-block,兼容性较差

5.   css3新属性，transform:translate(x,y)，子元素设置：

position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);            -webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);

6.   伪类和inline-block

主要是知道盒子是由较大高度的撑起来的即可

下面是用inline-block

用伪元素：或者：after都可以，但是还未验证，可能有问题

#content:before{

         content:' ';

         height:100%;

         display:inline-block;

       vertical-align:middle;

}