水平居中有text-align:center 和 margin:0 auto，前者是针对父元素进行设置而后者则是对子元素。margin:0 auto; 这里实现的前提是子元素没有float 浮动起来，不然没有效果。
垂直居中 line-height ，将其值设为等于父元素的height值，内部的文字就会自动垂直居中，仅只能是文字。
这个问题经常在实践中碰到总结一下经验，基本上都是从别人文章中看到的一些好的解决方法。
1、给父元素添加 parent:after{ content:""; display:table; clear:both}
2、position 实现 { 100px; height:80px; position:absolute; top:50%;left:50%; margin-left:50px;margin-top:40px}
使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，通过javascript来计算。图片的垂直上下居中分布
parent{ position:relative;}
child{ position:absolute; top:0; left:0; right:0; bottom:0;200px; height:400px; margin:auto}
元素竖直居中方法：
1、单行文本或图片的竖直居中 vertical-align：middle；
2、显示模式改为table
3、绝对定位+margin-top:负值
4、拉伸子元素 再配合margin：auto，见图片垂直上下居中
5、上下相等padding