方法一、小div绝对定位或相对定位，这样小div脱离标准流，大div有固定宽高，用小div的margin去挤大div
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px
height: 600px
background-color: orangered
}
.son{
width: 300px
height: 200px
background-color: lawngreen
position: absolute
margin: 200px 150px
}
</style></head><body><div><div></div></div></body></html>
注意：如果小div没有绝对定位或相对定位，且大div没有border，那么小div的margin实际上踹的是“流”，踹的是这“行”。如果用margin-top，大div整体也掉下来了。如下：
方法二、如果给大div加一个border，使大div，小div都不定位，用小div的margin去挤大div，实现小div居中。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px
height: 600px
background-color: orangered
border: 1px solid white
}
.son{
width: 300px
height: 200px
background-color: lawngreen
margin: 200px 150px
}
</style></head><body><div><div></div></div></body></html>
显示结果如下：
方法三、小div绝对定位，大div相对定位，定位到大盒子的宽高一半的位置，再上下各margin负的自己宽高的一半
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Title</title><style>
.father{
width: 600px
height: 600px
background-color: orangered
position: relative
}
.son{
width: 300px
height: 200px
background-color: lawngreen
position: absolute
top: 50%
left: 50%
margin-top: -100px
margin-left: -150px
}
</style></head><body><div><div></div></div></body>
</html>
显示结果如下：
扩展资料：
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。工程上，“子绝父相”有意义，父亲元素没有脱标，儿子元素脱标在父亲元素的范围里面移动。
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto失效。
display:inline和display:inline-block，会使margin:0 auto失效。
固定宽度的盒子才能使用margin:0 auto居中
div是不能定义垂直对齐,也就是V-ALIGN的!所以,
1:要看你DIV里面是什么内容,解决方法可以是使用FLOAT,浮动,把里面的元素浮动,然后定义MARGIN-TOP之类的
2:还可以在DIV里面放个TABLE,再在TABLE里面放内容,因为TABLE是支持垂直对齐V-ALIGN的
