jadeallencook jadeallencook - 24 days ago 7
CSS Question

Center Image Vertical and Horizontal

I tend to do this every web site I design I do, but I have yet to actually find a real good way to do it. A company usually gives me their logo, I center it in the middle of the screen for when you go to the page, and then it auto forwards you to the home page. I can not seem to find a good way to center an image in the middle of the screen without a bunch of tables and divs! Any good suggestions?!

Answer Source

You could try using a div in your HTML like this:

<div id='dv'></div>

And using a background image like this:

#dv {
    background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
    background-position: center;
}

html,body,#dv { /* so that the #dv can fill up the page */
    width:100%;
    height:100%;
}

Fiddle