                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

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

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

慕神1078843

2020-07-03

源自：初识HTML(5)+CSS(3)-升级版 15-4

关注问题我要回答

940

操作

收起

6 回答

慕的地3394807
2020-07-25

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

0 回复有任何疑惑可以回复我~

收起回答

慕用8339455
2020-07-19

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

0 回复有任何疑惑可以回复我~

收起回答

慕码人2492668
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>