实现水平居中，比较简单，对于行内元素，设置text-aligin:center;对于块级元素，设置left:0;right:0;margin: 0 auto。
以下是实现垂直居中的方法：
1.最简单的文字垂直居中，利用line-height属性，设置其和父元素等高
2.父元素设置样式table-cell
{display:table-cell;vertical-align:middle;}
低版本的IE浏览器，还需要给子元素添加{display:inline-block;}
3.给父元素添加伪类
:after{content:";width:0;height:100%;display:inline-block;vertical-align:middle;}
4.块级元素已知宽高的话，利用定位和负边距，若不想脱离文档流，子元素可以设置相对定位
.parent{position:relative;}
.child{position:absolute;width:100px;height:100px;top:50%;margin-top:-50px;}
5.块级元素已知宽高，利用定位和0，若不想脱离文档流，子元素可以设置相对定位
.parent{position:relative;}
.child{position:relative;width:100px;height:100px;top:0;bottom:0;margin auto 0;}
6.利用css3中的translate，目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+
.child{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%,-50%);}
7.利用flex布局，但是有兼容问题
Android
2.3 开始就支持旧版本display:-webkit-box;
4.4 开始支持标准版本display: flex;
IOS
6.1 开始支持旧版本display:-webkit-box;
7.1 开始支持标准版本display: flex;
PC
ie10开始支持，但是IE10的是-ms形式的。
.parent{display:flex;align-items:center;}
8.利用flex布局和margin:auto
.parent{display:flex;}
.child{margin:auto;}
9.利用display:-webkit-box
.parent{display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;-webkit-box-orient: vertical;text-align: center;}
