基本结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="parent"> <div class="child">CSS居中方案</div> </div> </body> </html>
方案
1.父元素的text-align：center
.parent{ text-align:center; } .child{ margin:20px 100px; display: inline-block; border:1px solid black; }
解释说明：text-align元素对块级元素和单元格（table-cell）起作用，其可使子元素居中显示。子元素添加display : inline-block ; 目的是为了是自身宽度自适应内容的宽度。
优点：兼容性好。在IE6、7下显示会有问题，可以通过{display：inline-block；zoom：1；}模拟display：inline-block。
缺点：子元素继承了父元素的text-align:center属性，会导致其内容居左显示，因而可以给子元素添加text-align属性使其正常显示它应该显示的地方。
2.margin: 0 auto;
.child{ margin:20px auto; display: table; border:1px solid black; }
解释说明：display：table；属性使其表现上像是block元素，而在宽度上，可以随内容而改变（自适应）。
优点：样式简单，兼容性好
3.绝对定位+偏移50%;
.parent{position: relative;} .child{ position: absolute; left: 50%; transform: translateX(-50%); border: 1px solid black; }
解释说明：通过定位来实现居中，由于left：50%；会使子元素从父元素的50%处开始显示的，为了使子元素居中可以通过transform：translateX(-50%)；来使子元素向左移动相对自身的宽度50%，这用就实现居中了。
缺点：兼容性不好。transform属性的兼容性不好。
3.flex
.parent{ display: flex; justify-content: center; } .child{ border: 1px solid black; }
解释说明：display：flex ;多列多栏布局。justify-content适用于：flex容器，设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
优点：只需要设置父元素的样式
缺点：兼容性差。