為什么要寫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>
2020-07-19
嗯嗯，我試也是這樣的。但我想知道這是為什么呢？
2020-07-19
這是我的多次嘗試后得到的結論：
當設置絕對定位的方向為top和left時，margin中的bottom和right的值就毫無作用，只是習慣上設為0，其實設置margin:-100px也是同樣的效果，甚至margin: -100px -200px 300px -100px效果也是一樣的，只要關心margin中的top和left。
當絕對定位方向為bottom和right時，同上。
2020-07-19
啥意思？是這樣。。。
2020-07-19
margin: 0 auto 不就居中了。。。