一.水平居中
（1）行内元素解决方案：父为块元素+text-align: center
只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：使用text-align: center;居中
对于行内元素或具有inline-block属性的元素居中，比如span、img等可以使用text-align: center;来实现。
-----------------------------------
行内元素居中
行内元素居中
行内元素居中
（2）单个块状元素解决方案
父层元素使用text-align: center居中,子层元素使用 margin: 10px auto; 10px可改变，以设置顶端外边距；
-----
块元素居中
（3）多个块状元素解决方案
将元素的display属性设置为inline-block，并且把父元素设置text-align：center即可:
块元素居中
块元素居中
块元素居中
（4）多个块状元素解决方案 (使用flexbox布局实现)
使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可:
我是span元素
二、垂直居中
（1）单行的行内元素解决方案 ：行内元素的height和line-height设置的和父元素一样高度即可实现垂直居中
div.parent {
background: #222;
height: 200px;
}
/* 以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a {
height: 200px;
line-height:200px;
color: #FFF;
}
--------------------
（2）多行的行内元素解决方案
组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：
-----------
我是span元素
我是span元素
（3）已知高度的块状元素解决方案:负margin和定位配合
好处是行内元素和块级元素都适用,但是需要知道元素本身的宽高度。
------------
我是span元素
三.水平垂直居中
（1）已知高度和宽度的元素解决方案1：margin-auto和定位的组合使用
这是一种不常见的居中方法，可自适应，比方案2更智能，如下：
---------------
我是span元素
（2）已知高度和宽度的元素解决方案2：负margin和定位配合
position 元素已知宽度 父元素设置为：position: relative; 子元素设置为：position: absolute; 距上50%，据左50% ；margin-left: -自身width/2
margin-top: -自身height/2
------------
我是span元素
（3）未知高度和宽度元素解决方案：使用translate居中
这种方法实现原理和负margin和定位的组合使用是一样的，
就是用css3的属性translate来达到和负margin一样的作用。
translate是transform的一个值，在这里作用是定义2D转换。
但是在IE9以下不支持
---------------
行内元素居中
（4）使用flex布局实现：使用flex居中不需要知道元素本身宽高以及元素的属性
-----
我是span元素
（5）calc和定位的组合使用
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
calc使元素居中的原理和负margin是一样的，calc 允许基于当前的页面布局计算尺寸。
计算公式为：
top: calc(50% - (自身高度height/ 2));
left: calc(50% - (自身高度宽度 / 2));
--
行内元素居中