参见详细教程，该教程涵盖了所有居中的情况：
https://css-tricks.com/centering-css-complete-guide/
css元素居中
1.水平居中
1）文本，图片等行内元素的水平居中
给父块状元素添加text-align:center属性。
2）确定宽度的块级元素的水平居中（注意一定是块内元素）
通过设置margin-left:auto以及margin-right:auto来实现
3）不确定宽度的的块状元素的水平居中
（1）将该不确定宽度的块状元素改为display:inline；为其外围的块状父元素设置text-align:center
(2)设置父元素position:relative,left:50%;子元素设置为position:relative和left：-50%。（relative的百分比是针对于自身？）
(3) 利用position:absolute；left:50%；transfrom:translate(-50%)；来实现；
2，垂直居中
1）父元素高度不确定的单文本，图片，块级元素的垂直居中
通过为父元素设置相同的上下padding来实现
2）父元素高度确定的单行文本的垂直居中
为父元素设置line-height,该line-height的高度等于父元素的确定高度
3）父元素高度确定的多行文本、图片、块状元素的垂直居中
关于垂直居中，css中有一个属性vertical-align;但是只有父元素是td或者th时，该元素才有效，对于其他块状元素p,div等，默认情况下不支持该属性；此时（1）设置父元素dispaly：table-cell，不过该属性不同浏览器的支持不同。（2）将内容就放置在一个一行一列的table里面，td标签默认就设置了vertical-align:middle.
关于垂直和水平居中的各种情况，可以参照慕课网
4)要是的icon/img和文字居中，需要为icon添加：verticle-align:middle