优点：兼容性好，甚至可以兼容ie6和ie7缺点：child中的文字也会水平居中，可以在.child中加上text-align:left;restore(2)使用定位absolute+transform.parent{position:relative;}.child{position:absolute;left:50%;transform:translateX(-50%);}优点：居中的元素不会影响其他缺点：transform属于css3内容，存在一些兼容性问题，高版本浏览器需要加一些前缀（3）ElasticLayout.parent{display:flex;}.child{margin:0auto;}另一种写法.parent{display:flex;justify-content:center;}缺点：低版本浏览器（ie6ie7ie8）不支持（4）table.child{display:table;margin:0auto;}缺点：不支持ie6,ie7,替换div为table2.垂直居中（1）tabletable-cell+vertical-align.parent{display:table-cell;vertical-align:middle;}ie8以上都支持（2）positioningabsolute+transform.parent{position:relative;}.child{position:absolute;top:50%;transform:translateY(-50%);}缺点：transform属于css3内容，存在一些兼容性问题。高版本浏览器需要加一些前缀(3)弹性布局flex+align-items.parent{display:flex;align-items:center;}缺点：兼容性存在一定问题3.水平和垂直居中(1)table.parent{text-align:center;display:table-cell;vertical-align:middle;}.child{display:inline-block;}优点：兼容性更好（2）positioning.child{position:absolute;left:50%;top:50%;transform:transplate(-50%,-50%);}缺点：兼容性存在一定问题(3)Flexiblelayout.parent{display:flex;justify-content:center;align-items:center;}缺点：兼容性存在一定的问题4.多栏布局定宽+自适应（1）浮动

left