不管是已知宽高的盒子还是宽高不定的盒子都可以用 transform: translate(-50%, -50%);来实现水平垂直居中吧？为什么上一课还要针对已知宽高的盒子用调节margin值的方式来实现呢，后期若是更改盒子宽高，还要重新调节margin值，多麻烦呀。如果全部用transform: translate(-50%, -50%);的方法，不管盒子宽高怎么改都可以实现水平垂直居中吧？
我刚发现如果div没有默认的字体字母啥的就体现不出来居中，也没有那个红方框。就比如这个课程里慕课网。。。这些字体，没有这些字就没有红方框
同问！！蹲一个解答~有答案踢一下我
没差别呀！
<!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>
不是这个道理，我在上一节的代码中用了这个transform: translate(-50%, -50%)，发现和用margin是有细微差别的，你可以试试看，中间的那个框是会稍微挪动一点点的。你可以试试，至于为什么我也不清楚。
是这么个道理