水平居中
text-align属性，设置元素内的文本，图片（inline属性的元素）的对其方式
text-align用于设置元素内的文本，图片或者其他inline元素在其中的对其方式，此属性要设置在元素上，用于管理元素内的文本的对其方式。
1.text-align用来设置元素中的的文本对齐方式，例如：如果需要设置图片的对齐方式，需要设置图片的父元素的text-align属性；
2.text-align只对文本有效，对元素无效，不能设置元素的对齐方式；
3.表格元素td是属于inline-block，可以使用text-align设置td中的文本对齐方式；
一、 文本、图片等行内元素的水平居中
给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。
二、 确定宽度的块级元素的水平居中
通过设置margin-left:auto;和margin-right:auto;来实现的。
三、不确定宽度的块级元素的水平居中
1、使用table标签，table本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中!
将需要居中的部分包含在table标签内，对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中，间接使需要居中的部分水平居中。
缺点：增加了无语意标签，加深了标签的嵌套层数。
2、改变块级元素display为inline类型，然后使用text-align:center来实现居中。
较方法一，好处是不用增加无语义标签，简化了标签的嵌套深度。坏处，将块级元素的display类型改为inline，缺少了一些块级元素的功能，比如高宽。
3、通过给父元素设置float，然后父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中。
可以保留块级元素仍以display:block的形式显示，而且不添加无语义标签，不增加嵌套深度，但缺点是设置了position:relative，带来一定的副作用。
垂直居中
一、父元素高度不确定的文本、图片、块级元素的垂直居中
通过给父容器设置相同上下边距实现的，即设置padding-top和padding-bottom。
二、父元素高度确定的单行文本的垂直居中
通过给父元素设置line-height来实现，line-height值和父元素高度值相同。
三、父元素高度确定的多行文本、图片、块级元素的垂直居中
CSS中有一个用于垂直居中的属性vertical-align，但只有当父元素为td或者th时，这个属性才生效，对于其他块级元素，如div,p等，默认情况下是不支持vertical-align属性的。在firefox和ie8下，可以设置块级元素的display:table-cell来激活vertical-align属性，但ie6和ie7并不支持display:table-cell。
1、直接使用table，因为td标签默认下就隐式设置了vertical-align:middle。
2、对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中，对不支持display:table-cell的ie6和ie7，使用特定格式的hack。
https://www.cnblogs.com/cainiao-Shun666/p/6622728.html