水平居中：

1. 行内元素居中
   text-align: center;
2. 定宽块级元素居中
   width: 300px;
   margin: 0 auto;
3. 不定宽块级元素居中

1. display:table;
   margin:0 auto;
2. position: relative;
   left: 50%; //将div边界浮动到50%

垂直居中：

1. 定高单行文本
   height: 100px;
   line-height: 100px;
2. 定高多行文本等

1. height: 200px; //随意高度
   position: absolute;
   top: 0;
   bottom:0;
   left: 0;
   right: 0;
   margin: auto;
2. height:200px;
   position:absolute;
   top:50%;
   margin-top: -100px;

3. 不定高
   display: flex;
   justify-content: center;
   align-items: center;

垂直水平居中：

1. 不定高宽
   父：
   position: relative;
   子：
   transform: translate(-50%,-50%);
   position: absolute;
   top: 50%;
   left: 50%;
2. 不定高宽
   display: flex;
   justify-content: center;
   align-items: center;

http://www.cnblogs.com/hutuzhu/p/4450850.html