How to center an img inside a div

Question

I\'m trying something that should be pretty easy but i can\'t figure out how to make it.

I have html source like this:

  &l         


        
                      

              相关标签:
       
      

Answer 1

If the image dimensions are static then something like this would work for you

.product img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 300px;
   height: 300px;
   margin-top: -150px; /* Half the height */
   margin-left: -150px; /* Half the width */
}

Answer 2

.product {
    width: 460px;
    height: 460px;
    line-height:460px;
    text-align:center;
}

http://jsfiddle.net/EHTeL/1/

Answer 3

If you want to center both vertically and horizontally, you should be able to apply display: table-cell to the div and use vertical-align

.product {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 460px;
    height: 460px;
}
.product img {
    margin: auto;
    display: block;
}

Answer 4

Try this - http://jsfiddle.net/tG9UK/

.product {
    width: 460px;
    height: 460px;

    display: table-cell;
    vertical-align: middle;
}