需求要求：
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，兼容性达不到要求
时间： 2024-10-10 15:14:24