<div id="parent">
<div id="child"></div>
</div>
<style>
#parent {
background-color: #666666;
height: 60px;
width: 100%;
/*
* 开启父级元素定位
* 默认static,不开启定位
* absolute、relative、fixed都可以开启定位
*/
position: relative;
}
#child {
background-color: #4492D0;
height: 60px;
width: 60px;
/*
* 当前元素设置为绝对定位后:
* *如果父级元素没有开启定位的话,当前元素是相对于页面定位
* *如果父级元素开启定位的话,当前元素是相对于父级元素定位
*/
position: absolute;
/*
* 相对于父级元素左边50%
*/
left: 50%;
/*
* 向左偏移子级元素的50%
*/
transform: translateX(-50%);
}
</style>
left:子集元素左边线距离左边的距离,只设置left的距离会使子集元素偏右,所以使用transform属性将子集元素再向左便宜它的50%
优点:父级元素是否脱离文档流都不会影响子集元素的居中效果
缺点:transform是css3新增属性,对浏览器兼容性不好