不管是已知宽高的盒子还是宽高不定的盒子都可以用 transform: translate(-50%, -50%);来实现水平垂直居中吧？-慕课网

不管是已知宽高的盒子还是宽高不定的盒子都可以用 transform: translate(-50%, -50%);来实现水平垂直居中吧？

来源：15-4 面试常考题之宽高不定实现盒子水平垂直居中

慕神1078843

2020-07-03 08:41

不管是已知宽高的盒子还是宽高不定的盒子都可以用 transform: translate(-50%, -50%);来实现水平垂直居中吧？为什么上一课还要针对已知宽高的盒子用调节margin值的方式来实现呢，后期若是更改盒子宽高，还要重新调节margin值，多麻烦呀。如果全部用transform: translate(-50%, -50%);的方法，不管盒子宽高怎么改都可以实现水平垂直居中吧？

写回答关注

5回答

慕的地3394807

2020-07-25 17:56:39

我刚发现如果div没有默认的字体字母啥的就体现不出来居中，也没有那个红方框。就比如这个课程里慕课网。。。这些字体，没有这些字就没有红方框

0 0
慕用8339455

2020-07-19 22:24:48

同问！！蹲一个解答~有答案踢一下我

0 0
慕码人2492668

2020-07-18 23:14:10

没差别呀！
<!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>

0 0
慕田峪8063247

2020-07-05 21:34:16

不是这个道理，我在上一节的代码中用了这个transform: translate(-50%, -50%)，发现和用margin是有细微差别的，你可以试试看，中间的那个框是会稍微挪动一点点的。你可以试试，至于为什么我也不清楚。

0 1
ryol

2020-07-03 20:29:32

是这么个道理

0 0