CSS Centre Image within Div

Question

I need to build a site with large high res images all 1600 px wide which I need to centre on the screen regardless of browser screen dimensions.

The images are designed so that they will look good centred down to 1024 px, but need to always display fixed from centre rather that top and left.

Does anyone have a solution - ideally which will suit both inline and background versions of the images!?

CSS3 solutions fine as i'm targeting ie8 plus.

@ArpitSrivastava you can't use `left:50%`, image will start from left side 50%, what he can do is have an outer wrapper div with width and height as 100% and use `margin: auto` not even 0 is required.. — Mr. Alien, Oct 01 '12 at 15:06
Could you give also idea to use jquery centering... it will be good for all, also ie... [link](http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen) — brabertaser19, Oct 01 '12 at 14:38

score 5 · Answer 1 · answered Oct 01 '12 at 14:37

Because you haven't provided any definite HTML markup, only a generic description of your problem, I provide you a link to http://css-tricks.com/centering-in-the-unknown/ Here you can find various CSS techniques to center content both vertically and horizontally.

jQuery is not necessary to center content, I believe you will manage it with proper HTML markup coupled with some CSS.

Fiddle ( http://jsfiddle.net ) will be helpful, though.

score 0 · Answer 2 · answered Oct 01 '12 at 14:42

0

What has worked for me is putting an image inside a div with id background right after the body and then using this CSS:

#background {
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

answered Oct 01 '12 at 14:42

Jordan Denison

2,649
14
14

score 0 · Answer 3 · answered Oct 01 '12 at 15:11

Do you mean that the image will remain the same size, but is designed to look good even if you are only viewing a central section of it? If so...

<img href="..." class="centered" />

.centered {
    position:fixed; top:50%; left:50%;
    width:1600px; height:800px;
    margin: -400px 0px 0px -800px;
    }

This will center an image that is 1600x800px. Just alter the top margin to be minus half the image height.

It's not necessary to declare the dimensions, just added to illustrate.

score 0 · Answer 4 · answered Oct 01 '12 at 18:03

Two ways:

Using Background Image

This is simple, the CSS code is as follows

div.image-wrapper {
    background: url('imgs/example.png') no-repeat center;
}

Using IMG tag

Here's the HTML:

<div id="img-area">
    <img src="imgs/example.png"/>
</div>

CSS:

#img-area img {
    display:block; //this will let us use margin auto
    margin:auto;
    top: (n)px;  //you can obtain 'n' by using JavaScript
}

Or you could use the method outlined in http://css-tricks.com/centering-in-the-unknown/ ; this will save you from using javascript.

CSS Centre Image within Div

4 Answers4