Trying to design a single page responsive website with a single photo in the middle - Help anyone?

Hello Everyone! I'm trying to do something fairly simple and I am hoping someone will be willing to help. I'm setting up a single page website with 500x250px PNG file in the middle that I have prepared in Photoshop and that contains my logo, contact information and a short message. I need it to be always in the middle of the screen, no matter the browser or the device it is viewed on, how would I go about doing this? (From Scratch)

 

you can add this to your css file :


#myimage {
float:none:
text-align:center;
}


Then call this Div and Insert your Image!

Goodluck

 

.container{
position:relative;
}
img {
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:auto;
}

This is nice and clean, and works for varying image sizes. It works in Firefox, Chrome, Safari, Opera, and IE 8 and 9.

 

Here the best solution.

Put this css in cs:
.container { margin:0 auto; width:500px; text-align:center;}

Put this in your index.html file:
<div class="container">your image and text goes over here</div>

I hope this will work for you.