正在回答
1、首先布局出现了错误，页面的效果不能出现左右滚动条，你设置的宽度已经超过了100%
2、图片其实是已经居中显示了，如下图：
3、建议同学这个页面的效果重新做一遍，然后慢慢积累经验。
例如以下代码，其中middle区域的图片在绝对定位后也居中不了，这是为什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:16px;
font-family:"微软雅黑";
}
.header{height:100px;
width:100%;
background-color:black;
position:fixed;
top:0;
z-index:5;
}
.footer{height:100px;
width:100%;
background-color:black;
position:fixed;
bottom:0;
text-align:center;
}
.container{height:1000px;
width:100%;
margin-top:100px;
margin-bottom:100px;
padding:0 600px;
}
/*以上是大框架*/
.middle{height:1000px;
width:100%;
float:left;
background:#ffc0cb;
}
.left{height:1000px;
width:600px;
float:left;
background-color:#ffefdb;
position:relative;
margin-left:-100%;
left:-600px;
}
.right{height:1000px;
width:600px;
float:left;
background-color:#89cff0;
position:relative;
margin-left:-600px;
right:-600px;
}
.middle img{width:600px;
height:400px;
position:absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}
</style>
</head>
<body>
<div class="header">
</div>
<div class="container">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="footer">
</div>
</body>
</html>
同学你好，第一个问题已经在别的问答里面进行了回答，你可以看一下：
http://class.imooc.com/course/qadetail/87815
2、一般整体布局做垂直居中或水平居中的话，推荐使用定位或者margin；
祝学习愉快
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星