center image in div with overflow hidden

by Faisal Khan Janjua

HTML

<div class="main">
<img class="absolute" src="http://lorempixel.com/g/400/200/" alt="" />
</div>

CSS

.main{
    /* width:auto;  width 100% if this is auto */
    width:300px;
    margin: 0 auto;
    /* overflow:hidden;  "Extra Image will be hidden"*/
    position: relative;
    height: 200px;
    border:1px solid #F00;
}

img.absolute{
    left: 50%;
    margin-left: -200px;
    position:absolute;
    opacity:0.6;
}