方法一:子元素使用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的,其它浏览器会直接忽略带*号的属性

不固定宽高,自适应

兼容性:兼容低版本浏览器,不固定宽高