為什么要寫margin：-50px 0 0 -50px;直接寫margin：-50px;結果是一樣的呀？
（或者說，為什么bottom:50%;決定了margin-bottom：-50px有顯示而margin-top：-50px沒顯示<其他方向也一樣>)
（方便起見，代碼已附在下方:)
注：圖片中注釋掉的部分代表沒顯示出來的。以防萬一，您也可以在下面的的代碼中自己嘗試一下。如有矛盾，請發截圖告知，多謝。
<!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: 200px;
??? height: 200px;
??? 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
思考了下樓主的問題，發現我可以理解另兩邊設成50px或其他任何正數，負px沒能理解。雖然不知道為什么，但是情況就是有兩邊的值完全不需要關心。蹲一個解答~
2020-07-19
.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
我看了一下你的代碼，你的這個問題應該是和你的box和div的大小有關系，你這個很湊巧的是，box是200px寬，div是100px寬，在div距box四周任意位置50px或者是50%的時候，div在box中正好是居中，div左邊距box是50，然后div是100，div右邊距box也是50，加起來剛好是box的寬。你把div或者是box這兩個隨便改一個寬高應該就能看出來區別了。我不知道我的解釋是不是清楚，不明白的可以繼續問。