请问这题margin-left是负的，为什么用margin-right没效果

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

margin: 0;

padding:0;

}

.test{

width: 800px;

height: 100px;

background: red;

/*此处写代码*/

position:fixed;

left:50%;

margin-left:-400px;

}

.out{

width: 100%;

height: 2000px;

background-color: #abcdef;

}

</style>

</head>

<body>

</div>

</body>

</html>

源自：CSS定位（position） 2-14 编程练习

收起

3回答

慕函数1202103 2020-08-24 15:05:50

为什么用 left:100%; right:400px;达不到居中显示效果呢？

或者 left:100%; margin-right:400px,也达不到居中效果？

好帮手慕粉 2020-08-11 09:42:59

同学你好，可以这样理解的。

好帮手慕粉 2020-08-07 10:53:19

同学你好，这是margin负边距实现居中显示的一种方法，先让元素向右移动父元素的50%（left:50%），再向左移动自身的一半(margin-left:-400px)，就实现了居中显示。如果要使用margin-right实现的话，应该是跟right搭配使用的。

如果我的回答帮助了你，欢迎采纳。祝学习愉快~

提问者慕粉13611605367 #1

就是说用了left就只可以用margin-left来调，用right只能用margin-right来调

2020-08-11 08:31:26
阿新哥哥回复提问者慕粉13611605367 #2

同学你好，都可以用来调整，只是我们一般用 left：50%搭配margin-left：-自身宽度的一半 right：50%搭配margin-ringht：-自身宽度的一半从而来起到水平居中效果！如果我的回答帮助了你，欢迎采纳。祝学习愉快~

2020-08-15 17:02:59