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;
}