网页前端代码存档 - 【第二期】纯css图片自适应大小且水平垂直居中的应用

哈哈，我又来了，十一放假前的最后一个工作日，小伙伴们是不是有的已经心里长草了呢，哈哈哈，之前工作的时候遇到不控制图片大小需要让图片上下左右都居中的问题，自己就深入的研究了一下，写了一段css代码，留个备份吧，老鸟请无视...

页面代码

<div class="box">
<!--
    <div class="scroll">
    <div class="scroll-leftbtn"><img src="images/left_arrow.png" /></div>
    <div class="scroll-main">
        <div class="imgbox">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td height="200" align="center" valign="middle"><img src="images/03.jpg" /></td>
                    </tr>
                </table>
            </div>
        </div>
    <div class="scroll-rightbtn"><img src="images/right_arrow.png" /></div>
    </div>


    <div class="scroll2">
    <div class="scroll2-leftbtn"><img src="images/left_arrow.png" /></div>
    <div class="scroll2-main">
        <img src="images/03.jpg" />
        </div>
    <div class="scroll2-rightbtn"><img src="images/right_arrow.png" /></div>
    </div>
-->
    
    <div class="scroll3">
    <div class="scroll3-leftbtn"><img src="images/left_arrow.png" /></div>
    <div class="scroll3-main">
        <a href="#" title="长春网站制作的怎么样啊啊啊"><div class="imgbox3" style="background:url(images/03.jpg) no-repeat center center; background-size:contain"></div></a>
        </div>
    <div class="scroll3-rightbtn"><img src="images/right_arrow.png" /></div>
    </div>
    
    
    
    
    <div class="scroll3">
    <div class="scroll3-leftbtn"><img src="images/left_arrow.png" /></div>
    <div class="scroll3-main">
        <a href="#" title="在吉林长春电子商务行业赚钱吗"><div class="imgbox3" style="background:url(images/03.jpg) no-repeat center center;"></div></a>
        </div>
    <div class="scroll3-rightbtn"><img src="images/right_arrow.png" /></div>
    </div>

    
    
    
    <div class="scroll4">
    <div class="scroll4-leftbtn"><img src="images/left_arrow.png" /></div>
    <div class="scroll4-main">
        <div class="imgbox4">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td height="200" align="center" valign="middle"><a href="#" title="在吉林长春微信营销如何圈粉呢"><img src="images/03.jpg" /></a></td>
                    </tr>
                </table>
            </div>
        </div>
    <div class="scroll4-rightbtn"><img src="images/right_arrow.png" /></div>
    </div>

    
    
    
    <div class="scroll5">
    <div class="scroll5-leftbtn"><img src="images/left_arrow.png" /></div>
    <div class="scroll5-main">
        <div class="imgbox5">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                <tr>
                    <td height="200" align="center" valign="middle"><img src="images/03.jpg" /></td>
                    </tr>
                </table>
            </div>
        </div>
    <div class="scroll5-rightbtn"><img src="images/right_arrow.png" /></div>
    </div>



</div>    

css 代码

.box{ width:100% ; margin:0 auto } 


.scroll{ width:100% ; margin:0 auto; } 
.scroll-leftbtn{ width:10%; height:200px; float:left ; display:table-cell; vertical-align:middle; text-align:center;} 
.scroll-rightbtn{ width:10%; height:200px; float:left; display:table-cell; vertical-align:middle; text-align:center;} 
.scroll-leftbtn img ,.scroll-rightbtn img{ margin-top:80px }
.scroll-main{ width:80%; height:200px; float:left ;}
.imgbox{ width:100%;  margin:0 auto ; height:200px; background-color:#999; }
.imgbox img{ max-height:200px;}


.scroll2{ width:100% ; margin:0 auto; } 
.scroll2-leftbtn{ width:10%; height:200px; float:left ; display:table-cell; vertical-align:middle; text-align:center;} 
.scroll2-rightbtn{ width:10%; height:200px; float:left; display:table-cell; vertical-align:middle; text-align:center;} 
.scroll2-leftbtn img ,.scroll2-rightbtn img{ margin-top:80px }
.scroll2-main{ width:80%; height:200px; float:left ; display:table-cell; vertical-align:middle; text-align:center; background-color:#ccc;}
.scroll2-main img{ max-height:200px; }


.scroll3{ width:100% ; margin:0 auto; position:relative;} 
.scroll3-leftbtn{ width:40px; height:200px; position:absolute; left:0; top:0; z-index:9999;display:table-cell; vertical-align:middle; text-align:center; } 
.scroll3-rightbtn{ width:40px; height:200px; position:absolute; right:0; top:0;  z-index:9999; display:table-cell; vertical-align:middle; text-align:center; } 
.scroll3-leftbtn img ,.scroll3-rightbtn img{ margin-top:80px }
.scroll3-main{ width:100%; height:200px; position:relative; background-color:#ccc;}
.imgbox3{ width:auto;  margin:0 auto ; height:200px; background-color:#999; margin:0 40px; overflow:hidden; }
.imgbox3 img{ max-height:200px;}



.scroll4{ width:100% ; margin:0 auto; position:relative;} 
.scroll4-leftbtn{ width:40px; height:200px; position:absolute; left:0; top:0; z-index:9999;display:table-cell; vertical-align:middle; text-align:center; } 
.scroll4-rightbtn{ width:40px; height:200px; position:absolute; right:0; top:0;  z-index:9999; display:table-cell; vertical-align:middle; text-align:center; } 
.scroll4-leftbtn img ,.scroll4-rightbtn img{ margin-top:80px }
.scroll4-main{ width:100%; height:200px; position:relative; background-color:#eee;}
.imgbox4{ width:auto;  margin:0 auto ; height:200px; background-color:#ddd; margin:0 40px; overflow:hidden; }
.imgbox4 img{ max-height:200px;}



.scroll5{ width:100% ; margin:0 auto; position:relative;} 
.scroll5-leftbtn{ width:40px; height:200px; position:absolute; left:0; top:0; z-index:9999;display:table-cell; vertical-align:middle; text-align:center; } 
.scroll5-rightbtn{ width:40px; height:200px; position:absolute; right:0; top:0;  z-index:9999; display:table-cell; vertical-align:middle; text-align:center; } 
.scroll5-leftbtn img ,.scroll5-rightbtn img{ margin-top:80px }
.scroll5-main{ width:100%; height:200px; position:relative; background-color:#ccc;}
.imgbox5{ width:auto;  margin:0 auto ; height:200px; background-color:#999; margin:0 40px; overflow:hidden;}
.imgbox5 img{ width:100%; max-height:200px;}


完事，马上下班了，十一假期我来啦  哈哈哈哈哈哈哈！