Needing to vertical center images inside div but answers found here aren't working

问题

I've done this:

#parent {
display:table-cell;
vertical-align:middle;
}

and this

img {
vertical-align: middle;
}

#parent {
height:200px;
line-height: 200px;
}

This is the css of the parent div

#parent{
display: table-cell; 
vertical-align: middle;
position:relative;
float:left;
margin: 5px 5px 5px 5px;
width:200px;
height:200px;
background-color:#e0ffff;
border-style:solid;border-width:5px;
}

I do not know what the dimensions of the images will be. I only know they will not be greater than 200X200. The div container of the parent has no styling. Is there something I am doing wrong that I don't know about? I realize this question has been asked a lot.

回答1:

Do you have a parent container for #parent? if so it needs the following css:

#parentOf #parent{ display: table; }

If not, put another div around the image called content and try:

#content{
    postition: absolute;
    top: 50%;
}

回答2:

May be you have to remove float from DIV

Check this http://jsfiddle.net/k9kVZ/

回答3:

try this out where inner div contains your image.

markup:

<div class="outer">
  <div class="inner">
    <img src="url" />
  </div>
</div>

css:

.outer{position:relative;}
.inner{
position:absolute;top:50%;
}

js:

$(document).ready(function(){
var inner = $('.inner'),
    ht = inner.height();

inner.css({'margin':-ht/2+'px 0 0 0'});
});

来源：https://stackoverflow.com/questions/9307218/needing-to-vertical-center-images-inside-div-but-answers-found-here-arent-worki