How to vertically center an image inside of a div element in HTML using CSS?
if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background
background-position: center center;
If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:
div{
display: table-cell; vertical-align: middle
}
Read more about this technique here. Reported to not work on IE6/7 (works on IE8).
Another way is to set your line-height in the container div, and align your image to that using vertical-align: middle.
html:
<div class="container"><img></div>
css:
.container {
width: 200px; /* or whatever you want */
height: 200px; /* or whatever you want */
line-height: 200px; /* or whatever you want, should match height */
text-align: center;
}
.container > img {
vertical-align: middle;
}
It's off the top of my head. But I've used this before - it should do the trick. Works for older browsers as well.