Q: Align overflowing images centrally on page How to align images on demo centrally?
with no overflow on x-axis on page.
i want images to be fully centered on page + it is important to know, that images are always wider that page. image has to overflow #wrap element, and be 100% wide on page.

HTML
<div id="wrap">
    <p>somecontent here</p>
    <img src="http://www.placecage.com/1000/500">

    <p>some more content here</p>
    <img src="http://www.placecage.com/1000/500">

    below goes footer

    <p>some footer text</p>
    <img src="http://www.placecage.com/1000/500">
</div>

CSS
#wrap {
    width:200px;
    margin:0 auto;
    background:lightblue;
}

link

A: If you want the images to be 100% of the page they should be outside the wrap div so you need to change your markup and use wrap only for content:
HTML
<div class="wrap">
    <p>somecontent here</p>
</div>
<img src="http://www.placecage.com/1000/500" />
<div class="wrap">
    <p>some more content here</p>
</div>
<img src="http://www.placecage.com/1000/500" />
<div class="wrap">below goes footer
    <p>some footer text</p>
</div>
<img src="http://www.placecage.com/1000/500" />

CSS
.wrap {
    width:200px;
    margin:0 auto;
    background:lightblue;
}

body > img{
    width: 100%;
    vertical-align: top;
}

Demo fiddle

A: If the images on the sides, you can hide, then:
#wrap {
    width:200px;
    margin:0 auto;
    background:lightblue;
    text-align: center;
    overflow: hidden
}

