一、水平居中
行内元素：
text-align: center
适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）块级元素：
对于块状元素（display:block）来说，我们需要将它的左右外边距（即margin-left，margin-right）设置为auto，即可实现块状元素的居中多个块级元素：
① 元素：display: inline-block;父元素text-align: center;
将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现
② 使用flexbox：
父元素display:flex; justify-content: center;
只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可
二、垂直居中
单个行内元素：
当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果多行行内元素：
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果已知高度的块级元素：
将待居中元素设置为绝对定位，并且设置margin-top为居中元素高度一半的负值-
未知高度的块级元素：
.item{ top: 50%; position: absolute; transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */ }
使用transform属性来垂直移动来实现垂直居中。
三、水平垂直居中
已知高度和宽度的元素：
设置元素定位为absolute，并且设置top,left绝对值为50%，margin-top和margin-left为元素高度一半的负值即可未知高度和宽度的元素：
-
类似的
transform属性来定义.item{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 使用table-cell:
在父元素中设置display: table-cell; vertical-align: middle; text-align:center;使用
box（以WebKit为例，其它所需兼容再添。注意浏览器支持情况Firefox 、Safari、Opera 以及 Chrome ）
display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center;
- 使用flex布局实现：
在父元素设置display: flex; justify-content:center; align-items: center; /* 注意这里需要设置高度来查看垂直居中效果 */
（注意浏览器支持情况Firefox 、Safari、Opera 以及 Chrome ）
*flex和box较适合移动端以及不需要考虑低版本浏览器的开发。
