                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

为什么要写margin：-50px 0 0 -50px;直接写margin：-50px;结果是一样的呀？(2)

将box{width: 200px;height: 200px;}改为.box{width: 300px;height: 150px;}，问题还是存在

（代码如下：）?

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>已知宽高实现盒子水平垂直居中</title>
<div class="box">
     <div class="one">one</div>
     <div class="two">two</div>
     <div class="three">three</div>
     <div class="four">four</div>
</div>

<style>
.box {
    width: 300px;
    height: 150px;
    border: 1px black solid;
    position:relative;
}
.box div {
    width: 100px;
    height: 100px;
    position:absolute;
}
.one{
    border: 1px red solid;
    top:50%;
    right:50%;
    /*margin-top:-50px;*/
    /*margin-right:-50px;*/
    margin-bottom:-50px;
    margin-left:-50px;
}
.two{
    border: 1px blue solid;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-right:-50px;
    margin-bottom:-50px;
    margin-left:-50px;
}
.three{
    border: 1px orange solid;
    bottom:50%;
    right:50%;
    margin-top:-50px;
    margin-right:-50px;
    margin-bottom:-50px;
    margin-left:-50px;
}
.four{
    border: 1px green solid;
    bottom:50%;
    left:50%;
    margin-top:-50px;
    margin-right:-50px;
    margin-bottom:-50px;
    margin-left:-50px;
}

</style>

</html>