参见详细教程，该教程涵盖了所有居中的情况：

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%。

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和文字居中，需要为icon添加：verticle-align:middle