需求要求：
1.子容器相对父容器水平居中
2，子容器与父容器的自身宽度都是自适应的
解决方案一（inline-block+text-align）
<style type="text/css"> body{margin:20px;} .parent{ text-align: center; } .child{ display: inline-block; } </style>
<body> <div class="parent"> <div class="child">DEMO</div> </div> </body>
要点:
display: inline-block; 特点：宽度根据内容来，
text-align: center 特点：对inline元素起作用
方案一优点：兼容性好，
缺点： 1.因为父元素上设置了text-align:center,所以子元素会继承过来，导致子元素的文字和容器一起居中，解决办法：增加.child{text-align:left;}
2.Ie6.7不兼容inline-block,需要加上display:inline; zoom:1；来兼容
解决方案二（table+margin）
<style type="text/css"> body{margin:20px;} .child{ display: table; margin: 0 auto; } </style>
<div class="parent"> <div class="child">DEMO</div> </div>
要点:
display: table; 特点：table类似block元素,并且宽度也是根据内容走.
方案二优点：只需要设置.child的样式，不用去考虑parent上的样式，支持Ie8+
缺点：Ie6,7不支持display：table，我们可以吧html部分的结构换成table的结构，就可以兼容到了。
解决方案三（absolute+transform）
<style type="text/css"> body{margin:20px;} .parent{height:1.5em;} .parent{ position: relative; } .child{ position: absolute; left: 50%; transform: translateX(-50%);<!--左移自身宽度的一半-->
} </style> </head> <body> <div class="parent"> <div class="child">DEMO</div> </div> </body>
要点:
position: absolute特点：宽度也是根据内容走
方案二优点：absolute脱离文档流，不会对其他元素产生影响，
缺点：transform:不支持Ie6,7，8，兼容性达不到要求
解决方案四（flex+justify-content）
<style type="text/css"> body{margin:20px;} .parent{ display: flex; justify-content: center; }
<!--如果不用justify-content，可以在子元素上设置--> .child{ margin: 0 auto; } </style>
<body> <div class="parent"> <div class="child">DEMO</div> </div> </body>
要点:
在.parent设置display: flex; ，它的子元素.child就成为了flex item,默认情况为宽度为auto，
方案二优点：只需要设置parent节点就可以了，child不需要去设置
缺点：flex不支持Ie6,7，8，兼容性达不到要求