1.水平居中

(1) 文本、图片等行内元素的水平居中
　　给父元素设置text-align:center;可以实现文本、图片等行内元素的水平居中。

(2) 确定宽度的块级元素的水平居中
　　通过设置margin: 0 auto;来实现的。
(3) 不确定宽度的块级元素的水平居中
方法一：
　　改变块级元素display:inline;类型，然后使用text-align:center来实现居中。
　　方法二:
　　通过给父元素设置float，然后父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中。
　　方法三:
　　通过给父元素设置display:flex，然后父元素设置justify-content: center;子元素实现水平居中。

2.垂直居中

(1) 父元素高度不确定的文本、图片、块级元素的垂直居中
　　通过给父容器设置相同上下边距实现的，即设置padding-top和padding-bottom。
(2)父元素高度确定的单行文本的垂直居中
　　通过给父元素设置line-height来实现，line-height值和父元素高度值相同。
(3)父元素高度确定的多行文本、图片、块级元素的垂直居中
　　垂直居中的属性vertical-align，除父元素为td、th外，对于其他块级元素，如div,p等，默认情况下是不支持vertical-align属性的。因此在firefox和ie8下，可以设置块级元素的display:table-cell来激活vertical-align属性。