SO centre clipped image

by panchroma

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
        <div class="container">
			<div class="row">
				<div id="div-1" class="photo-div span4">
					<div class="photo-div-content">
						<h1>Logitech Mouse</h1>
                        <div class="img-wrap"><img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"></div>
					</div>
				</div>
					<div id="div-2" class="photo-div span4">
					<div class="photo-div-content">
						<h1>Logitech Mouse</h1>
                        <div class="img-wrap"><img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"></div>
					</div>
				</div>
				<div id="div-3" class="photo-div span4">
					<div class="photo-div-content">
						<h1>Logitech Mouse</h1>
                        <div class="img-wrap"><img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"></div>
					</div>
				</div>
			</div>
		</div>

CSS

.photo-div {
    overflow:auto;
    height:250px;
    border: 1px solid #000;
    text-align:center;
    box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}


.OLDphoto-div-content {
    width:100%;
    margin:0 auto;
}

.img-wrap{ /* dimensions should match clipping size */
    width:200px;
    height:200px;
    margin:0 auto;
}
img.clipped {
    position:absolute;
    clip:rect(0px,200px,200px,0px);
}