上一篇：https://blog.csdn.net/weixin_43970743/article/details/104917333
相信很多小夥伴是被我上篇blog給“騙”過來的，那就暫留片刻，相信不會讓你“掉價”。哈哈哈哈
注意：
當使用：top: 50%;left: 50%;， 是以左上角爲原點，故不處於中心位置；而transform: translate(-50%, -50%)：作用是，往上（x軸）,左（y軸）移動自身長寬的 50%，以使其居於中心位置。
對比與負margin-left和margin-top實現居中不同的是，margin-left必須知道自身的寬高，而translate可以在不知道寬高的情況下進行居中，tranlate（）函數中的百分比是相對於自身寬高的百分比，所以能進行居中。
知識點：
CSS3： transform: translate(-50%, -50%);
<body>
<div class="fattar">
<div class="son"></div>
</div>
</body>
.father{
position: absolute;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
對比：
結果很明瞭，都是實現了相同的水平垂直居中，可看，兩種方式，雖大同卻小異；看各自的理解，恰當使用；
❤如果文章對您有所幫助，就在文章的右上角或者文章的末尾點個贊吧！(づ￣ 3￣)づ
❤如果喜歡大白兔分享的文章，就給大白兔點個關注吧！(๑′ᴗ‵๑)づ╭❤～
❤對文章有任何問題歡迎小夥伴們下方留言或者入羣探討【羣號：708072830】
❤鑑於個人經驗有限，所有觀點及技術研點，如有異議，請直接回復討論（請勿發表攻擊言論）。