Center the image completely?

Question

I have a div and an image in a div. Image size will vary.

I want it to be centered horizontally and vertically. Css verticle align not working.

Any tricks? I can use php, css or jquery

Answer 1

I do not know how you use it, so probably my solution will not work.

When you implement an image as a "background image" in a div, you can easily center it using the "background-position":

#div {
background-image: url(./image.png);
background-position: center center;
}

Answer 2

You can make it align horizontally using

margin: 0 auto;

CSS ( , IE6/7). .

, jQuery. , JavaScript. , , JS/, .

CSS - display: table-cell ( - display: table).

<div id="container"><img src="my-image.png" alt="" /></div>

jQuery, ( plexus)

var imageSrc = $('#container img').attr('src');

$('#container').css({ backgroundImage: 'url(' + imageSrc + ')', backgroundPosition: 'center enter' });