不管是已知寬高的盒子還是寬高不定的盒子都可以用 transform: translate(-50%, -50%);來實現水平垂直居中吧？
不管是已知寬高的盒子還是寬高不定的盒子都可以用 transform: translate(-50%, -50%);來實現水平垂直居中吧？為什么上一課還要針對已知寬高的盒子用調節margin值的方式來實現呢，后期若是更改盒子寬高，還要重新調節margin值，多麻煩呀。如果全部用transform: translate(-50%, -50%);的方法，不管盒子寬高怎么改都可以實現水平垂直居中吧？
2020-07-25
我剛發現如果div沒有默認的字體字母啥的就體現不出來居中，也沒有那個紅方框。就比如這個課程里慕課網。。。這些字體，沒有這些字就沒有紅方框
2020-07-19
同問??！蹲一個解答~有答案踢一下我
2020-07-18
沒差別呀！
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>已知寬高實現盒子水平垂直居中</title>
?<div class="box">
???? <div class="one">one</div>
???? <div class="two">two</div>
</div>
<style>
.box {
??? width: 200px;
??? height: 200px;
??? border: 1px black solid;
??? position:relative;
}
.box div {
??? width: 100px;
??? height: 100px;
}
.one {
?? ?border: 1px red solid;
?? ?position:absolute;
?? ?top:50%;
?? ?right:50%;
?? ?margin-top:-50px;
?? ?margin-right:-50px;
}
.two {
?? ?border: 1px green solid;
?? ?position:absolute;
?? ?top:50%;
?? ?right:50%;
transform:translate(50px,-50px);
}
</style>
</html>
2020-07-05
不是這個道理，我在上一節的代碼中用了這個transform: translate(-50%, -50%)，發現和用margin是有細微差別的，你可以試試看，中間的那個框是會稍微挪動一點點的。你可以試試，至于為什么我也不清楚。
2020-07-03
是這么個道理