把宽改为100px之后，margin设为-50px 0 0 -50px 没有居中？-慕课网

首页课程实战体系课手记专栏慕课教程

把宽改为100px之后，margin设为-50px 0 0 -50px 没有居中？

来源：15-3 面试常考题之已知宽高实现盒子水平垂直居中

慕村7067317

2020-08-13 10:13

.box1 {

position: absolute;

top:50%;

left:50%;

margin:-50px 0px 0px -50px;

width: 100px;

height: 200px;

border: 1px solid red;

}

写回答关注

4回答

慕的地2173049

2020-08-13 15:49:33

已采纳

margin里面上和左是自身宽高值的一半，.box1的高度是200px，margin应该是：-50px 0 0 -100px

0 0
慕仰4133941

2020-08-18 11:04:45

上面回答是错的叭，margin：-100px 0 0 -50px，第一个是：-height/2 最后一个是-width/2吧

1 1

慕的地217...

嗯嗯，刚试了下，这个才是对的，我现在比较喜欢那个不定宽高的，不用记太多，直接transform: translate(-50%, -50%);

2020-08-20 14:17:37

共 1 条回复 >
慕村7067317

2020-08-15 09:49:17

谢谢你

0 0
慕村7067317

2020-08-13 10:15:07

这种效果

0 0

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225813 学习 · 18234 问题

相似问题

为什么要写margin：-50px 0 0 -50px;直接写margin：-50px;结果是一样的呀？

回答 3

为什么要写margin：-50px 0 0 -50px;直接写margin：-50px;结果是一样的呀？(2)

回答 5

定宽图片为何不能用margin:0 auto;居中

回答 3

margin:-100px 0 0 -100px;这一步的含义不是很懂

回答 1

任务要求是相对于以前位置左上角向右移动100px，向下移动50px，为何代码不是：right:100px;bottom:50px;

回答 3

打开慕课网App查看更多内容