CSS常用居中1、text-align + line-heigh 或者表现样式 2、Flex span为行内元素，此处

个人觉得没必要使用黑科技，兼容性好、代码强壮、简洁才是真爱啊**

1、text-align + line-heigh

或者

表现样式

2、Flex

span为行内元素，此处使用div效果相同.但是div如果设置宽高需要另行调整

表现样式

还有一种flex + margin auto (不推荐，既然已经使用flex 为什么要用一半呢？)

不推荐

表现样式

3、position 定位

行内元素需要block

表现样式

4、css - table

网上很多在box父元素也加上vertical-align:middle的，这里仅需如此即可

表现样式

5、CSS3居中

css3-transform

表现样式

6、块级元素的水平居中 margin: 0 auto

这里有一个错误的黑科技，经过实践是不可行的，如下

.box {
    width: 100%;
    height: 200px;
    background-color: #409eff;
    color: #ffffff;
    position: relative;
}
.box span {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

以上代码乍一看是可以的原理类似于block元素的margin: 0 auto ; 但是仔细一看 position跳出文档流 margin 显然是不可行的