居中问题
提问，为什么设置了left: 25%没有居中，还需要设置margin-left才能居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.test{
width: 800px;
height: 100px;
background: red;
/*此处写代码*/
position: fixed;
left: 25%;
margin-left: -50px;
}
.out{
width: 100%;
height: 2000px;
background-color: #abcdef;
}
</style>
</head>
<body>
<div class="out">
<div class="test"></div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
您好，其它同学给你的回答是正确的。注意是设置left:50%;margin-left: -400px;。同学再尝试一下，是否还是存在问题。
设置了left: 25%没有居中，还需要设置margin-left才能居中：25%的距离是不固定的。且800px的一半是400px，那么要想居中就是页面以中间分开，应该左边400px，右边400px，而25%可以是400px吗？是不能确定的，因此需要再次设置margin-left才能居中。
设置left:50%;margin-left: -400px;成功的原因：设置left:50%;可以使test的左边框处于居中的位置（注意仅是左边框）：
那么再设置margin-left: -400px;，因为整个test的宽度是800px，那么在往回移动一半400也就是居中了。
祝学习愉快！
left: 50%;
margin-left: -400px;
试试吧
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 626 份
- 解答问题 4930 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星