说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。
方法一：margin + width
css布局水平居中margin + width
Demo
说明：这个水平居中方法，我们最熟悉了，也是最常用的，width可以固定px也可以使用百分比
方法二：table + margin
css布局水平居中table + margin
Demo
说明：display: table在表现上类似block元素，但是宽度为内容宽。无需设置父元素样式 (支持 IE 8 及其以上版本)兼容 IE 8 一下版本需要调整为
方法三：inline-block + text-align
css布局水平居中inline-block + text-align
Demo
说明：兼容性佳(甚至可以兼容 IE 6 和 IE 7)
方法四：absolute + margin-left
css布局水平居中absolute + margin-left
Demo
说明：宽度固定相比于使用transform ，有兼容性更好
方法五：absolute + transform
css布局水平居中absolute + transform
Demo
说明：绝对定位脱离文档流，不会对后续元素的布局造成影响。transform为 CSS3 属性，有兼容性问题
方法六：flex + justify-content
css布局水平居中flex + justify-content
Demo
说明：只需设置父节点属性，无需设置子元素flex有兼容性问题