<div id="parent">
<div id="child"></div>
</div>
<style>
#parent {
background-color: #666666;
height: 60px;
width: 100%;
}
#child {
background-color: #4492D0;
height: 60px;
width: 60px;
/*
* table和block都可以(div默认是block,所以也可以不用专门设置)
*/
display: table;
/*
* 外边距
* 一个值:上右下左
* 两个值:第一个表示上下,第二个表示左右
* 三个值:第一个表示上,第二个表示左右,第三个表示下
* 四个值:分别表示上右下左
* auto:根据浏览器自动分配
*/
margin: 0 auto;
}
</style>
优点:只需要对子集元素进行设置就可以实现水平居中
缺点:如果子集元素脱离文档流(添加position:absolute、float等属性)就会导致margin属性失效