水平居中
1、元素内容的水平居中
说到这个就不得不说到一个属性text-align，text-align属性定义行内内容（例如文字）如何相对于它的父元素进行对齐， 但是并不控制块元素自己的对齐，只控制它的行内内容的对齐，这个属性能很好的解决部分水平居中的问题。
初始值：start
适用元素：display为block，inline-block，inherit的元素
属性值：start | end | left | right | center | justify | match-parent | start end
2、元素的水平居中
垂直居中
1、元素内容的垂直居中
内容的垂直居中的话，vertical-align是一个常用的属性，vertical-align 指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式。
初始值：baseline
适用元素：display为inline，inline-block，table-cell，::first-letter，::first-line的元素
属性值：baseline | sub | super | text-top | text-bottom | middle | top | bottom ||
2、元素的垂直居中
水平垂直居中
1、元素内容的水平垂直居中
2、元素的水平垂直居中