精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

本文主要跟大家分享：div+css实现不同尺寸图片水平垂直居中溢出隐藏，下面青岛星网给大家详细的范例代码，供div+css的同学学习。

HTML范例代码

<div class="m-demo">
    <p>
        <img src="1.jpg" class="hidden"/>
        <img src="1.jpg" alt=""/>
    </p>
</div>
<div class="m-demo">
    <p>
        <img src="2.jpg" class="hidden"/>
        <img src="2.jpg" alt=""/>
    </p>
</div>
<div class="m-demo">
    <p>
        <img src="3.jpg" class="hidden"/>
        <img src="3.jpg" alt=""/>
    </p>
</div>

CSS范例代码

/* 图片居中溢出隐藏  */ 
.m-demo{position:relative;width:300px;height:300px;overflow:hidden;border:1px solid #ddd;}
.m-demo p{position:absolute;top:50%;left:50%;margin:0;padding:0;}
.m-demo img{position:absolute;top:-50%;left:-50%;display:block;}
.m-demo img.hidden{visibility:hidden;position:static;}
/* 预览辅助样式 */
body{margin:20px;}
.m-demo{float:left;display:inline;margin-left:20px;}

在线Demo预览

Tags：div+css 垂直居中 溢出