為什么要寫(xiě)margin：-50px 0 0 -50px;直接寫(xiě)margin：-50px;結(jié)果是一樣的呀？
（或者說(shuō)，為什么bottom:50%;決定了margin-bottom：-50px有顯示而margin-top：-50px沒(méi)顯示<其他方向也一樣>)
（方便起見(jiàn)，代碼已附在下方:)
注：圖片中注釋掉的部分代表沒(méi)顯示出來(lái)的。以防萬(wàn)一，您也可以在下面的的代碼中自己嘗試一下。如有矛盾，請(qǐng)發(fā)截圖告知，多謝。
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>已知寬高實(shí)現(xiàn)盒子水平垂直居中</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
思考了下樓主的問(wèn)題，發(fā)現(xiàn)我可以理解另兩邊設(shè)成50px或其他任何正數(shù)，負(fù)px沒(méi)能理解。雖然不知道為什么，但是情況就是有兩邊的值完全不需要關(guān)心。蹲一個(gè)解答~
2020-07-19
.box{width: 300px;height: 150px;}，好像沒(méi)不同,問(wèn)題還是存在（代碼如下：）?
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>已知寬高實(shí)現(xiàn)盒子水平垂直居中</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
我看了一下你的代碼，你的這個(gè)問(wèn)題應(yīng)該是和你的box和div的大小有關(guān)系，你這個(gè)很湊巧的是，box是200px寬，div是100px寬，在div距box四周任意位置50px或者是50%的時(shí)候，div在box中正好是居中，div左邊距box是50，然后div是100，div右邊距box也是50，加起來(lái)剛好是box的寬。你把div或者是box這兩個(gè)隨便改一個(gè)寬高應(yīng)該就能看出來(lái)區(qū)別了。我不知道我的解釋是不是清楚，不明白的可以繼續(xù)問(wèn)。