麻烦老师看下这个代码问题在哪

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.container{width: 80%;height: 500px;margin: auto auto;background-color: #cccc99;position:relative;top: 50px;}
.up{width: 100%;height: 350px;background-color: #9999cc;position: absolute;}
.down{width: 100%;height: 150px;background-color: #ff9999;position: absolute;bottom: 0px;}
.upl{width: 50%;height: 350px;background-color: #9999cc;position: absolute;}
.upr{width: 50%;height: 350px;background-color: #9999cc;position: absolute;right: 0;}
img{display: block;position:absolute;top:0;bottom:0;left:0;right:0;margin: auto auto;}
.dol{width: 33%;height: 150px;background-color: #ff9999;float:left;}
.dom{width: 34%;height: 150px;background-color: #ff9999;float: left;}
.dor{width: 33%;height: 150px;background-color: #ff9999;float: left;}
</style>
</head>
<body>
<div class="container">
<div class="up">
<div class="upl"><img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg"></div>
<div class="upr"><img src="http://img1.sycdn.imooc.com/climg//58c0f819000198a703600214.jpg"></div>
</div>
<div class="down">
<div class="dol"><img src="http://img1.sycdn.imooc.com/climg//58c0f81d0001fe4402000060.jpg"></div>
<div class="dom"><img src="http://img1.sycdn.imooc.com/climg//58c0f8780001c74602000060.jpg"></div>
<div class="dor"><img src="http://img1.sycdn.imooc.com/climg//58c0f8220001dfce02000060.jpg"></div>
</div>
</div>
</body>
</html>

img用统一居中属性，为什么.up里面的图片能正常居中，.down里面的就不行呢？是因为我用了float的原因吗?

秦鲸卿 2018-01-12

源自：CSS网页布局基础 2-13 混合布局