方法一：子元素使用position:absolute + margin:auto

兼容性：主流浏览器都支持，IE6不支持

方法二：父元素使用dispaly:table-cell + text-align:center + vertical-align:middle

兼容性：由于使用了display:table-cell的原因，不支持IE6/7

方法三：子元素使用position:absolute + transform:translate(x,y)

兼容性：IE9以下不支持transform，手机端表示比较好

方法四：父元素使用display:flex + align-items:center + justify-content:center

兼容性：移动端首选方式

方法五：父元素使用display:flex，子元素使用margin:auto

兼容性：移动端使用比较好

方法六：父元素使用position:relative，子元素使用position:absolute

兼容性：适合所有浏览器，缺点：子元素必须是已知宽高

方法七：兼容低版本浏览器，不固定宽高，CSS属性前面的*号是用来兼容IE6/7的，其它浏览器会直接忽略带*号的属性

兼容性：兼容低版本浏览器，不固定宽高